SVGMarkerElement: orient-Eigenschaft

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die orient-Eigenschaft der Schnittstelle SVGMarkerElement definiert, wie der Marker gedreht wird, wenn er an seiner Position auf der Form platziert wird. Sie spiegelt den Wert des orient-Attributs des entsprechenden <marker>-Elements wider.

Im Gegensatz zu SVGMarkerElement.orientType und SVGMarkerElement.orientAngle, die jeweils nur Lesezugriff auf die Orientierung und den Winkel bieten, ermöglicht die orient-Eigenschaft das direkte Abrufen und Setzen des orient-Attributs als Zeichenkette.

Wert

Eine Zeichenkette. Mögliche Werte sind:

"auto": Der Marker wird automatisch gedreht, um der Richtung des Pfades an dem Punkt zu folgen, an dem er platziert ist.
"auto-start-reverse": Wenn durch marker-start platziert, wird der Marker in einem Winkel von 180° zur Orientierung ausgerichtet, die verwendet würde, wenn auto angegeben wäre. Für alle anderen Marker bedeutet auto-start-reverse dasselbe wie auto.
Ein <angle>-Wert (z.B. "45deg"): Der Marker wird um den angegebenen Winkel gedreht, gemessen von der Horizontalen.
Ein <number>-Wert (z.B. "45"): Der Marker wird im angegebenen Winkel in Grad ausgerichtet.

Beispiele

Zugriff auf die `orient`-Eigenschaft

html

<svg
  viewBox="0 0 100 100"
  width="300"
  height="300"
  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="12"
      markerHeight="12"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <polyline
    points="10,90 50,10 90,90"
    fill="none"
    stroke="black"
    marker-start="url(#arrow)"
    marker-mid="url(#arrow)"
    marker-end="url(#arrow)" />
</svg>
<output></output>

body {
  font-family: system-ui;
}

output {
  display: block;
  font: inherit;
  white-space: pre;
}

Wir können die orient-Eigenschaft lesen und dann auf einen neuen Wert setzen:

const marker = document.querySelector("marker");
const log = document.querySelector("output");

if ("orient" in marker) {
  // Read the current orient value
  log.textContent = `orient: "${marker.orient}"\n`; // "auto-start-reverse"

  // Set a new orient value
  marker.orient = "90deg";
  log.textContent += `after setting "90deg": "${marker.orient}"`;
} else {
  log.textContent = "orient is not supported in this browser";
}

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # __svg__SVGMarkerElement__orient

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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