orient

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.

Das Attribut orient gibt an, wie ein Marker gedreht wird, wenn er auf seiner Position auf der Form platziert wird.

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

Beispiel

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <marker
      id="dataArrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="-65deg">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>

  <polyline
    points="10,10 10,90 90,90"
    fill="none"
    stroke="black"
    marker-start="url(#arrow)"
    marker-end="url(#arrow)" />

  <polyline
    points="15,80 29,50 43,60 57,30 71,40 85,15"
    fill="none"
    stroke="grey"
    marker-start="url(#dataArrow)"
    marker-mid="url(#dataArrow)"
    marker-end="url(#dataArrow)" />
</svg>

Verwendungshinweise

Wert auto | auto-start-reverse | <angle> | <number>
Standardwert 0
Animierbar Ja (nicht additiv)
auto

Dieser Wert gibt an, dass der Marker so ausgerichtet ist, dass seine positive x-Achse in eine Richtung relativ zum Pfad zeigt, an dem der Marker platziert wird.

auto-start-reverse

Wenn er durch marker-start platziert wird, ist der Marker um 180° anders ausgerichtet als die Orientierung, die verwendet würde, wenn auto angegeben wäre. Für alle anderen Marker bedeutet auto-start-reverse dasselbe wie auto.

Hinweis: Dies ermöglicht es, einen einzelnen Pfeilkopfmarker zu definieren, der sowohl für den Anfang als auch das Ende eines Pfades verwendet werden kann, d.h. der nach außen von beiden Enden zeigt.

<angle>

Dieser Wert gibt an, dass der Marker so ausgerichtet ist, dass der angegebene Winkel der ist, der zwischen der positiven x-Achse der Form und der positiven x-Achse des Markers gemessen wird.

Hinweis: Wenn beispielsweise ein Wert von 45 angegeben wird, würde die positive x-Achse des Markers nach unten rechts im Koordinatensystem der Form zeigen.

<number>

Dieser Wert gibt einen Winkel in Grad an. Der Marker ist so ausgerichtet, dass der angegebene Winkel der ist, der zwischen der positiven x-Achse der Form und der positiven x-Achse des Markers gemessen wird.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# OrientAttribute

Browser-Kompatibilität