javascript - 使用 CSS 将阴影应用于三 Angular 形 SVG

Question

我想知道如何将阴影应用于 svg 图像(例如三 Angular 形)。我找到了像 polyfill 这样的解决方案，但它并没有按照我想要的方式工作。我做了一个JSFiddle给你看我想给的影子。

我的 HTML:

<div class="spikes"></div>

我的 CSS:

body {
  background-color: #ccc;
}
.spikes {
    margin-top: 20px;
    width: 250px;
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogIC    AgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQog    IDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
    height: 20px;
    position: absolute;
    max-width: 1000px;
    transition: 0.75s;
    -webkit-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
    -moz-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
    box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
}

Answer 1

您不能将阴影应用于 background-image，因为它是 CSS 属性而不是元素。

您可以做的是将filter:drop-shadow 应用于元素。

如果 SVG 具有透明度/alpha，它将看起来像这样:

body {
  background-color: #ccc;
}
.spikes {
  margin-top: 20px;
  width: 250px;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
  height: 20px;
  position: absolute;
  max-width: 1000px;
  transition: 0.75s;
  filter: drop-shadow(-1px -1px 1px black);
}

<div class="spikes"></div>