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

html
<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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
vector-effect

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch