vector-effect

Die vector-effect-Eigenschaft legt den Vektoreffekt fest, der beim Zeichnen eines Objekts verwendet werden soll. Vektoreffekte werden angewendet, bevor andere Compositing-Operationen wie Filter, Masken und Clips ausgeführt werden.

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

Elemente

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

Verwendungshinweise

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 werden soll, d.h. das Standard-Rendierungsverhalten wird verwendet, bei dem zunächst die Geometrie einer Form mit einer angegebenen Farbe gefüllt und dann die Umrisse mit einer angegebenen Farbe umrandet werden.

non-scaling-stroke

Dieser Wert ändert die Art und Weise, wie ein Objekt umrandet wird. Normalerweise umfasst das Umranden das Berechnen der Umrisse des Pfades der Form im aktuellen Benutzerkoordinatensystem und das Füllen dieser Umrisse mit der Umrandungsfarbe (Farbe oder Verlauf). Der resultierende visuelle Effekt dieses Wertes ist, dass die Strichbreite nicht von den Transformationen des Elements (einschließlich nicht-uniformer Skalierung und Scherung) und dem Zoomlevel abhängt.

Hinweis: Die Spezifikation definiert drei weitere Werte, non-scaling-size, non-rotation und fixed-position, aber diese haben keine Implementierungen und gelten als risikobehaftet.

Beispiele

Setzen von vector-effect auf 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

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

Siehe auch