SVGシンボルにドロップシャドウを追加する

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のボックスシャドウを試して、フィルタ：ドロップシャドウ（）も、どちらも何もしていないようです。例えば

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

助けてください。

Answer 1

は、SVGフィルターを使用します。

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

 
.icon-svg { 
 
    -webkit-filter: url(#dropshadowy); 
 
}

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