Question

我想知道如何将阴影应用于svg图像（例如三角形）。我找到了像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，它将看起来像这样：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

使用CSS将阴影应用于三角形SVG

1 个答案: