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 wird. Vektoreffekte werden vor allen anderen Kompositionsoperationen angewendet, d.h. vor Filtern, Masken und Clips.

Hinweis: Als Präsentationsattribut hat vector-effect auch ein CSS-Eigenschaftsgegenstück: vector-effect. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Elemente

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

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, d.h. das Standard-Rendeverhalten wird verwendet. Dies bedeutet, dass die Geometrie einer Form zunächst mit einer angegebenen Farbe gefüllt und dann der Umriss mit einer angegebenen Farbe gestrichen wird.
non-scaling-stroke: Dieser Wert ändert die Art und Weise, wie ein Objekt gestrichen wird. Normalerweise umfasst das Streichen das Berechnen des Umrisses einer Form im aktuellen Benutzerkoordinatensystem und das Füllen dieses Umrisses mit der Strichfarbe (Farbe oder Verlauf). Der resultierende visuelle Effekt dieses Wertes ist, dass die Strichbreite nicht von den Transformationen des Elements (einschließlich nicht-uniformem Skalieren und Schertransformationen) und vom Zoom-Level abhängt.

Hinweis: Die Spezifikation definiert drei weitere Werte, non-scaling-size, non-rotation, und fixed-position, aber diese haben keine Implementierungen und werden als gefährdet betrachtet.

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

Siehe auch

CSS vector-effect Eigenschaft