CSS 仅在 SVG 形状上有阴影，而不是整个文档

Question

是否可以只在 SVG 形状而不是整个文档上获得 CSS 阴影？ IE。蓝色箭头周围：

a:after {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .50);
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    content:"";
    position: absolute;
    background-image: url(http://www.domblogger.net/buttons/play.svg);
    background-repeat: no-repeat;
    background-position: 0;
    height: 350px;
    width: 350px;
}

<a href="#">Play</a>

Answer 1

可以，但您必须在原始 svg 元素 (use) 上应用 filter，而不是通过 CSS.

将 http://www.domblogger.net/buttons/play.svg 处的文件更改为：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1.1">
  <defs>
    <polygon id="play" fill="rgb(0,0,200)" fill-opacity="0.6" points="0,0 0,350 300,175" />
    <filter id="d" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
      <feOffset dx="5" dy="5" result="offsetblur" />
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5" />
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <g>
    <use filter="url(#d)" x="55" y="25" xlink:href="#play" />
  </g>
</svg>

Answer 2

如果您的意思是只希望在箭头形状上使用阴影，则不要将背景颜色设置为白色（a:after 样式规则的第一行）。

a:after {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    content:"";
    position: absolute;
    background-image: url(http://www.domblogger.net/buttons/play.svg);
    background-repeat: no-repeat;
    background-position: 0;
    height: 350px;
    width: 350px;
}

<a href="#">Play</a>

CSS 仅在 SVG 形状上有阴影，而不是整个文档

CSS shadow on SVG shape only, not entire document

css

svg

css-shapes