Ist es möglich, Schlagschatten für ein SVG-Element mit CSS3 zu setzen?
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
Ich habe einige Anmerkungen zum Erstellen von Schatten mithilfe von Filtereffekten gesehen. Gibt es ein Beispiel für die alleinige Verwendung von CSS? Unten finden Sie einen Arbeitscode, in dem der Cusor-Stil korrekt angewendet wird, jedoch kein Schatteneffekt. Bitte helfen Sie mir, den Schatteneffekt mit dem geringsten Code zu erzielen.
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>
quelle
slope
Variieren Sie einfach das Attribut, um die gewünschte Deckkraft zu optimieren.Verwenden Sie die
neueCSS-filter
Eigenschaft.Unterstützt von Webkit-Browsern , Firefox 34+ und Edge .
Sie können diese Polyfüllung verwenden , die FF <34, IE6 + unterstützt.
Sie würden es so verwenden:
Dieser Ansatz unterscheidet sich vom
box-shadow
Effekt dadurch, dass er die Deckkraft berücksichtigt und den Schlagschatteneffekt nicht auf die Box, sondern auf die Ecken des SVG-Elements selbst anwendet.Bitte beachten Sie : Dieser Ansatz funktioniert nur, wenn die Klasse nur auf dem
<svg>
Element platziert wird. Sie können dies NICHT für ein Inline-SVG-Element wie z<rect>
.Lesen Sie mehr über CSS-Filter auf html5rocks .
quelle
Mit der CSS-Funktion drop-shadow () und den rgba-Farbwerten können Sie einem svg-Element ganz einfach einen Schlagschatteneffekt hinzufügen. Mit rgba-Farbwerten können Sie die Deckkraft Ihres Schattens ändern.
quelle
Der einfachste Weg, den ich gefunden habe, ist mit
feDropShadow
. Ich werde nie wieder diese unglaublich esoterischen Filter-Tag-Namen verwenden, die ich nicht verstehe.quelle
Mir ist keine reine CSS-Lösung bekannt.
Wie Sie bereits erwähnt haben, sind Filter der kanonische Ansatz zum Erstellen von Schlagschatteneffekten in SVG. Die SVG-Spezifikation enthält ein Beispiel dafür.
quelle
-webkit-filter: drop-shadow()
ist der Weg, um sicher zu gehen. Siehe die Antwort von @hitautodestruct.Removed: Filter Effects This chapter is no longer part of the SVG specification
!!Schwarzer Text mit weißem Schatten
Ein anderer Weg, den ich für weißen Schatten (auf Text) verwendet habe: Erstellen Sie einen Klon für Schatten:
Hinweis : Dies erfordert
xmlns:xlink="http://www.w3.org/1999/xlink"
bei der SVG-Deklaration.Der reale Textwert befindet sich im
<defs>
Abschnitt mit Position und Stil, jedoch ohnefill
Definition.Der Text wird zweimal geklont: erstens für Schatten und zweitens für den Text selbst.
Weiter entfernter Schatten mit dem größten Wert als Unschärfeabweichung :
Sie können denselben Ansatz für reguläre SVG-Objekte verwenden.
Bei gleicher Anforderung: Keine Fülldefinition im
<defs>
Abschnitt !quelle
flood-color
?Blur
wird verwendet, um den Schatten etwas unscharf erscheinen zu lassen. Siehe meine zweite TextversionMore distant shadow...
(gerade hinzugefügt)Wahrscheinlich eine Weiterentwicklung, scheint es, dass Inline-CSS-Filter in gewisser Weise gut auf Elemente funktionieren.
Das Deklarieren eines Schlagschatten-CSS-Filters in einem SVG-Element sowohl in einer Klasse als auch in einer Inline funktioniert NICHT , wie zuvor angegeben.
Aber zumindest in Firefox mit der folgenden Zauberei:
Anhängen der Filterdeklaration inline mit Javascript nach dem Laden des DOM .
quelle