Question

我正在构建一个图标非常繁重的网站，因此我使用SVG符号来减少重复。在某些情况下，设计要求符号具有投影，而不是其他符号。我正在努力弄清楚如何添加投影。

我的SVG示例：

<svg id="icons-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
<symbol id="icon-communications" viewBox="1400 0 200 200">
    <title>Communications</title>
    <rect style="fill: currentColor" x="1447.3" y="95.3" width="105.3" height="5.3"/>
    <rect style="fill: currentColor" x="1447.3" y="78" width="105.3" height="5.3"/>
    <polygon style="fill: currentColor" points="1463.2,127.9 1468,130.1 1475.7,113.6 1470.9,111.4   "/>
    ...
</symbol>
...
</svg>

然后我使用标准在页面上添加图标：

<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <use xlink:href="#icon-communications"/>
</svg>

然后我可以像这样设置图标的颜色：

.icon-svg use {
    color: blue;
}
.error .icon-svg use {
    color: red;
}

但我无法弄清楚如何添加投影。我已经尝试了CSS box-shadow，还过滤了：drop-shadow（），但似乎都没有做任何事情。 e.g。

.someClass .icon-svg use {
    color: #fff;
    -webkit-filter: drop-shadow( 0 0 20px #000 );
    filter: drop-shadow( 0 0 20px #000 );
}

任何帮助都将不胜感激。

Answer 1

使用SVG过滤器：

＆＃13;

.icon-svg use {
    color: blue;
}
.error .icon-svg use {
    color: red;
}

.icon-svg {
  -webkit-filter: url(#dropshadowy);
}

＆＃13;

<svg id="icons-svg" >
  <defs>
<filter id="dropshadowy">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
    
<symbol id="icon-communications" viewBox="1400 0 200 200">
    <title>Communications</title>

    <rect style="fill: currentColor" x="1447.3" y="95.3" width="105.3" height="5.3"/>
    <rect style="fill: currentColor" x="1447.3" y="78" width="105.3" height="5.3"/>
    <polygon style="fill: currentColor" points="1463.2,127.9 1468,130.1 1475.7,113.6 1470.9,111.4   "/>

</symbol>
  </defs>

</svg>


<svg class="icon-svg" >
 
    <use xlink:href="#icon-communications"/>

</svg>

＆＃13;

向SVG符号添加阴影

1 个答案: