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 gibt den Vektoreffekt an, der beim Zeichnen eines Objekts verwendet werden soll. Vektoreffekte werden angewendet, bevor andere Kompositionsoperationen durchgeführt werden, d.h. Filter, Masken und Clips.

Hinweis: Als Präsentationsattribut hat vector-effect auch ein entsprechendes CSS-Attribut: vector-effect. Wenn beide angegeben sind, hat das CSS-Attribut Vorrang.

Elemente

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Anwendungshinweise

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. es wird das Standard-Renditionsverhalten verwendet, das darin besteht, die Geometrie einer Form zuerst mit einer angegebenen Farbe zu füllen und dann die Umrandung mit einer angegebenen Farbe zu überstreichen.
non-scaling-stroke: Dieser Wert ändert die Art und Weise, wie ein Objekt überstrichen wird. Normalerweise beinhaltet das Überstreichen die Berechnung der Umrandung der Form im aktuellen Benutzerkoordinatensystem und das Füllen dieser Umrandung mit der Überstreichfarbe (Farbe oder Verlauf). Der visuelle Effekt dieses Wertes ist, dass die Linienstärke nicht von den Transformationen des Elements (einschließlich nicht-uniformer Skalierungen und Schertransformationen) und dem Zoomlevel abhängt.

Hinweis: Die Spezifikation definiert drei weitere Werte, non-scaling-size, non-rotation und fixed-position, aber diese sind nicht implementiert und gelten als riskant.

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