Hinzufügen von Schlagschatten zu SVG-Symbolen

Question

Ich baue eine Website, die sehr schwer auf Icons ist, also arbeite ich mit SVG-Symbolen, um die Duplizierung zu reduzieren. In einigen Fällen erfordert das Design, dass die Symbole einen Schlagschatten haben und nicht in anderen. Ich kämpfe um herauszufinden, wie ich einen Schlagschatten hinzufügen kann.

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

Ich schließe dann das Symbol auf Seite mit dem Standard:

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

Ich kann dann legen Sie die Farbe des Symbols wie folgt aus:

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

Aber ich kann nicht herausfinden, wie man einen Schlagschatten hinzufügt. Ich habe CSS box-shadow ausprobiert, und auch filter: drop-shadow(), aber beide scheinen nichts zu tun. z.B.

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

Jede Hilfe wäre willkommen.

Answer 1

eine SVG-Filter verwenden:

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