Question

是否可以仅在SVG形状上获取CSS阴影，而不是整个文档？ IE浏览器。围绕蓝色箭头：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

是的，但您必须在原始filter元素（svg）上应用use，而不是通过CSS。

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

＆＃13;

<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>

＆＃13;

Answer 2

如果您的意思是只想在箭头形状上使用阴影，那么请不要将背景颜色设置为白色（a的第一行：在样式之后）。

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>

只有SVG形状的CSS阴影，而不是整个文档

2 个答案: