SVGMarkerElement

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.

Die SVGMarkerElement-Schnittstelle bietet Zugriff auf die Eigenschaften von <marker>-Elementen sowie Methoden zu deren Manipulation. Das <marker>-Element definiert die Grafiken, die zum Zeichnen von Markierungen auf einer Form verwendet werden.

EventTarget Node Element SVGElement SVGMarkerElement

Die folgenden Eigenschaften und Methoden beziehen sich auf die Attribute des durch SVGMarkerElement dargestellten <marker>-Elements.

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, SVGElement.

SVGMarkerElement.markerUnits Nur lesbar

Gibt ein SVGAnimatedEnumeration-Objekt zurück, mit einem der folgenden Werte:

0

SVG_MARKERUNITS_UNKNOWN, was bedeutet, dass das markerUnits-Attribut einen anderen Wert als die beiden vordefinierten Schlüsselwörter aufweist.

1

SVG_MARKERUNITS_USERSPACEONUSE, was bedeutet, dass das markerUnits-Attribut den Schlüsselwortwert userSpaceOnUse hat.

2

SVG_MARKERUNITS_STROKEWIDTH, was bedeutet, dass das markerUnits-Attribut den Schlüsselwortwert strokeWidth hat.

SVGMarkerElement.markerWidth Nur lesbar

Gibt ein SVGAnimatedLength-Objekt zurück, das die Breite des <marker>-Ansichtsfensters enthält.

SVGMarkerElement.markerHeight Nur lesbar

Gibt ein SVGAnimatedLength-Objekt zurück, das die Höhe des <marker>-Ansichtsfensters enthält.

SVGMarkerElement.orientType Nur lesbar

Gibt ein SVGAnimatedEnumeration-Objekt zurück, mit einem der folgenden Werte:

0

SVG_MARKER_ORIENT_UNKNOWN, was bedeutet, dass das orient-Attribut einen anderen Wert als die beiden vordefinierten Schlüsselwörter aufweist.

1

SVG_MARKERUNITS_ORIENT_AUTO, was bedeutet, dass das orient-Attribut den Schlüsselwortwert auto hat.

2

SVG_MARKERUNITS_ORIENT_ANGLE, was bedeutet, dass das orient-Attribut einen <angle>- oder <number>-Wert besitzt, der den Winkel angibt.

SVGMarkerElement.orientAngle Nur lesbar

Gibt ein SVGAnimatedAngle-Objekt zurück, das den Winkel des orient-Attributs enthält.

SVGMarkerElement.refX Nur lesbar

Gibt ein SVGAnimatedLength-Objekt zurück, das den Wert des refX-Attributs des <marker> enthält.

SVGMarkerElement.refY Nur lesbar

Gibt ein SVGAnimatedLength-Objekt zurück, das den Wert des refY-Attributs des <marker> enthält.

SVGMarkerElement.viewBox Nur lesbar

Gibt ein SVGAnimatedRect-Objekt zurück, das ein SVGRect enthält, welches die durch das viewBox-Attribut am <marker>-Element gesetzten Werte enthält.

SVGMarkerElement.preserveAspectRatio Nur lesbar

Gibt ein SVGPreserveAspectRatio-Objekt zurück, das die durch das preserveAspectRatio-Attribut am <marker>-Ansichtsfenster gesetzten Werte enthält.

Instanz-Methoden

Diese Schnittstelle erbt auch Methoden von ihrem Elternteil, SVGElement.

SVGMarkerElement.setOrientToAuto()

Setzt den Wert des orient-Attributs auf auto.

SVGMarkerElement.setOrientToAngle()

Setzt den Wert des orient-Attributs auf einen speziellen Winkelwert.

Beispiele

Das folgende SVG wird in den Beispielen verwendet.

html
<svg id="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="90">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>

Ermitteln der Breite des Markers

Die markerWidth-Eigenschaft gibt ein SVGAnimatedLength zurück, das ein SVGLength mit dem Wert des markerWidth-Attributs enthält.

js
let marker = document.getElementById("arrow");
console.log(marker.markerWidth.baseVal.value); // 6

Aktualisierung des Orientierungswinkels

Im folgenden Beispiel wird der Wert des orient-Attributs mit setOrientToAngle() aktualisiert, indem ein SVGAngle verwendet wird, das mit SVGElement.createSVGAngle() erstellt wurde.

js
let svg = document.getElementById("svg");
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // value in SVG above - 90
let angle = svg.createSVGAngle();
angle.value = "110";
marker.setOrientToAngle(angle);
console.log(marker.orientAngle.baseVal.value); // new value - 110

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGMarkerElement

Browser-Kompatibilität

BCD tables only load in the browser