orient

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

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

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

<marker>

Beispiel

html,
body,
svg {
  height: 100%;
}

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`
Animationsfähig	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 zum Pfad an der Position des Markers ist.
auto-start-reverse: Wenn durch marker-start platziert, ist der Marker um 180° anders orientiert als bei der Verwendung von auto. 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 Start 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 zwischen der positiven x-Achse der Form und der positiven x-Achse des Markers liegt.

Hinweis: Wenn zum Beispiel ein Wert von 45 angegeben wird, würde die positive x-Achse des Markers in das Koordinatensystem der Form unten und rechts zeigen.
<number>: Dieser Wert gibt einen Winkel in Grad an. Der Marker ist so ausgerichtet, dass der angegebene Winkel zwischen der positiven x-Achse der Form und der positiven x-Achse des Markers liegt.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # OrientAttribute

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden