Wie füge ich SVGs nur mit CSS Schlagschatten hinzu?

So erstellen Sie Schlagschatten für SVGs mit CSS3

Ist es möglich, Schlagschatten für SVG-Elemente mit CSS3 zu erstellen? Etwas wie:

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

Es gab Diskussionen über die Erzeugung von Schatten mithilfe von Filtereffekten. Gibt es ein Beispiel, das nur CSS verwendet? Unten finden Sie einen Funktionscode, bei dem der Cursorstil entsprechend angewendet wird, aber kein Schatteneffekt vorhanden ist. Wie kann der Schatteneffekt mit minimalem Code erreicht werden?

svg .shadow {
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

Lösung

Verwenden Sie das CSS-Attribut „Filter“.

Kompatibel mit Webkit-Browsern, Firefox 34 und Edge.

Eine Polyfüllung ist verfügbar, um FF < 34 und IE6 .

Implementierung:

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

Das obige ist der detaillierte Inhalt vonWie füge ich SVGs nur mit CSS Schlagschatten hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!