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 orient-Attribut gibt an, wie ein Marker gedreht wird, wenn er an seiner Position auf der Form platziert wird.

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

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>

Nutzungshinweise

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 zeigt, die relativ zu dem Pfad an der Position ist, an der der Marker platziert wird.

auto-start-reverse

Wenn es durch marker-start platziert wird, ist der Marker 180° anders orientiert 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 die Definition eines einzelnen Pfeilkopf-Markers, der sowohl für den Anfang als auch das Ende eines Pfads verwendet werden kann, d.h. der an beiden Enden nach außen zeigt.

<angle>

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

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

<number>

Dieser Wert gibt einen Winkel in Grad an. Der Marker ist so ausgerichtet, dass der angegebene Winkel derjenige 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

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
orient

Legend

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

Full support
Full support