vector-effect
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.
Die Eigenschaft vector-effect legt fest, welcher Vektoreffekt beim Zeichnen eines Objekts verwendet wird. Vektoreffekte werden vor allen anderen Compositing-Vorgängen angewendet, also vor Filtern, Masken und Clipping.
Hinweis:
Als Präsentationsattribut hat vector-effect auch eine entsprechende CSS-Eigenschaft: vector-effect. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
Elemente
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiele
vector-effect auf non-scaling-stroke setzen
<svg viewBox="0 0 500 240">
<!-- normal -->
<path
d="M10,20 L40,100 L39,200 z"
stroke="black"
stroke-width="2px"
fill="none"></path>
<!-- scaled -->
<path
transform="translate(100,0) scale(4,1)"
d="M10,20 L40,100 L39,200 z"
stroke="black"
stroke-width="2px"
fill="none"></path>
<!-- fixed-->
<path
vector-effect="non-scaling-stroke"
transform="translate(300, 0) scale(4, 1)"
d="M10,20 L40,100 L39,200 z"
stroke="black"
stroke-width="2px"
fill="none"></path>
</svg>
Ergebnis
Verwendungshinweise
| Wert |
none | non-scaling-stroke |
non-scaling-size | non-rotation |
fixed-position
|
|---|---|
| Standardwert | none |
| Animierbar | diskret |
none-
Dieser Wert legt fest, dass kein Vektoreffekt angewendet wird. Stattdessen wird das standardmäßige Rendering-Verhalten verwendet: Zuerst wird die Geometrie einer Form mit der angegebenen Füllung ausgefüllt, anschließend wird ihre Kontur mit der angegebenen Farbe oder einem Farbverlauf gezeichnet.
non-scaling-stroke-
Dieser Wert ändert, wie die Kontur eines Objekts gezeichnet wird. Normalerweise wird dazu der Umriss der Kontur anhand des Pfads der Form im aktuellen Benutzerkoordinatensystem berechnet und mit der Konturfarbe oder einem Farbverlauf ausgefüllt. Der sichtbare Effekt dieses Werts besteht darin, dass die Konturbreite nicht von den Transformationen des Elements (einschließlich ungleichmäßiger Skalierung und Scherung) oder der Zoomstufe abhängt.
Hinweis:
Die Spezifikation definiert drei weitere Werte, non-scaling-size, non-rotation und fixed-position. Diese sind jedoch nicht implementiert und gelten als gefährdet.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # VectorEffectProperty |
Browser-Kompatibilität
Siehe auch
- CSS-Eigenschaft
vector-effect