SVG Schlagschatten mit css3

Question

Ist es möglich, Schlagschatten für ein svg-Element mit css3 zu setzen, etwas wie

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

Ich habe einige Bemerkungen zur Erstellung von Schatten mit Hilfe von Filtereffekten gesehen. Gibt es ein Beispiel für die Verwendung von css allein. Unten ist ein funktionierender Code, wo die cusor Stil korrekt angewendet wird, aber kein Schatten-Effekt. Bitte helfen Sie mir, den Schatteneffekt mit möglichst wenig Code zu erzeugen.

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>

Answer 1

Wenn Ihr SVG-Element <text> können Sie die CSS-Eigenschaft text-shadow ohne jedes Problem. Die Syntax lautet text-shadow: color x-offset-px y-offset-px blur-px .

Answer 2

Wahrscheinlich eine Entwicklung, scheint es, dass Inline-CSS-Filter funktioniert gut auf Elemente, in einer bestimmten Weise.

Die Deklaration eines css-Filters für den Schlagschatten in einem svg-Element, sowohl in einer Klasse als auch inline, bewirkt NICHT funktioniert, wie bereits erwähnt.

Aber, zumindest in Firefox mit den folgenden Zaubereien:

Anhängen der Filtererklärung Inline , mit Javascript, nach DOM-Laden .

// Does not works, with regular dynamic css styling:

shadow0.oninput = () => {
  rect1.style.filter = "filter:drop-shadow(0 0 " + shadow0.value + "rem black);"
}

// Okay! Inline styling, appending.

shadow1.oninput = () => {
  rect1.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);"
  rect2.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);"
}

<h2>Firefox only</h2>
<h4>
Does not works! 
<input id="shadow0" type="number" min="0" max="100" step="0.1">

 | Okay!
<input id="shadow1" type="number" min="0" max="100" step="0.1">

<svg viewBox="0 0 120 70">  
    <rect id="rect1" x="10" y="10" width="100" height="50" fill="#c66" />

    <!-- Inline style declaration does NOT works at svg level, no shadow at loading: -->
    <rect id="rect2" x="40" y="30" width="10" height="10" fill="#aaa" style="filter:drop-shadow(0 0 20rem black)" />

</svg>

Answer 3

Eine reine CSS-Lösung ist mir nicht bekannt.

Wie Sie bereits erwähnt haben, sind Filter der klassische Ansatz zur Erstellung von Schlagschatteneffekten in SVG. Die SVG-Spezifikation enthält ein entsprechendes Beispiel.