vector-effect
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die vector-effect
-Eigenschaft legt den Vektoreffekt fest, der beim Zeichnen eines Objekts verwendet werden soll. Vektoreffekte werden vor allen anderen Kompositionsoperationen angewendet, d. h. Filtern, Masken und Clips.
Hinweis:
Als Präsentationsattribut hat vector-effect
auch ein entsprechendes CSS-Property: vector-effect
. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
Elemente
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
Nutzungsnotizen
Wert |
none | non-scaling-stroke |
non-scaling-size | non-rotation |
fixed-position
|
---|---|
Standardwert | none |
Animierbar | diskret |
none
-
Dieser Wert gibt an, dass kein Vektoreffekt angewendet wird, d. h. das Standard-Render-Verhalten wird verwendet, bei dem zuerst die Geometrie einer Form mit einer angegebenen Farbe gefüllt und anschließend die Kontur mit einer angegebenen Farbe gezeichnet wird.
non-scaling-stroke
-
Dieser Wert modifiziert die Art und Weise, wie ein Objekt gestrichen wird. Normalerweise beinhaltet das Streichen das Berechnen der Kontur des Pfads der Form im aktuellen Benutzerkoordinatensystem und das Füllen dieser Kontur mit der Streichfarbe (Farbe oder Gradient). Der visuelle Effekt dieses Wertes besteht darin, dass die Strichbreite nicht von den Transformationen des Elements (einschließlich nicht-uniformer Skalierungen und Schertransformationen) und dem Zoomlevel abhängt.
non-scaling-size
-
Dieser Wert gibt ein spezielles Benutzerkoordinatensystem an, das von dem Element und seinen Nachkommen verwendet wird. Der Maßstab dieses Benutzerkoordinatensystems ändert sich nicht trotz möglicher Transformationsänderungen im Hostkoordinatensystem. Es wird jedoch nicht die Unterdrückung von Rotation oder Schrägung angegeben. Außerdem wird der Ursprung des Benutzerkoordinatensystems nicht festgelegt. Da dieser Wert die Skalierung des Benutzerkoordinatensystems unterdrückt, hat er auch die Eigenschaften von
non-scaling-stroke
. non-rotation
-
Dieser Wert gibt ein spezielles Benutzerkoordinatensystem an, das von dem Element und seinen Nachkommen verwendet wird. Die Rotation und Schrägung dieses Benutzerkoordinatensystems wird trotz möglicher Transformationsänderungen im Hostkoordinatensystem unterdrückt. Es wird jedoch nicht die Unterdrückung der Skalierung angegeben. Außerdem wird der Ursprung des Benutzerkoordinatensystems nicht festgelegt.
fixed-position
-
Dieser Wert gibt ein spezielles Benutzerkoordinatensystem an, das von dem Element und seinen Nachkommen verwendet wird. Die Position des Benutzerkoordinatensystems bleibt fixiert, unabhängig von möglichen Transformationsänderungen im Hostkoordinatensystem. Es wird jedoch nicht die Unterdrückung von Rotation, Schrägung und Skalierung angegeben. Wenn dieser Vektoreffekt und die
transform
-Eigenschaft gleichzeitig definiert sind, wird diese Eigenschaft für diesen Effekt verwendet.
Beispiele
Festlegen von vector-effect
als non-scaling-stroke
<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
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # VectorEffectProperty |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
vector-effect |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- CSS-
vector-effect
-Eigenschaft