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.
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 dasmarkerUnits
-Attribut einen anderen Wert als die beiden vordefinierten Schlüsselwörter aufweist. - 1
-
SVG_MARKERUNITS_USERSPACEONUSE
, was bedeutet, dass dasmarkerUnits
-Attribut den SchlüsselwortwertuserSpaceOnUse
hat. - 2
-
SVG_MARKERUNITS_STROKEWIDTH
, was bedeutet, dass dasmarkerUnits
-Attribut den SchlüsselwortwertstrokeWidth
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 dasorient
-Attribut einen anderen Wert als die beiden vordefinierten Schlüsselwörter aufweist. - 1
-
SVG_MARKERUNITS_ORIENT_AUTO
, was bedeutet, dass dasorient
-Attribut den Schlüsselwortwertauto
hat. - 2
-
SVG_MARKERUNITS_ORIENT_ANGLE
, was bedeutet, dass dasorient
-Attribut einen<angle>
- oder<number>
-Wert besitzt, der den Winkel angibt.
SVGMarkerElement.orientAngle
Nur lesbar-
Gibt ein
SVGAnimatedAngle
-Objekt zurück, das den Winkel desorient
-Attributs enthält. SVGMarkerElement.refX
Nur lesbar-
Gibt ein
SVGAnimatedLength
-Objekt zurück, das den Wert desrefX
-Attributs des<marker>
enthält. SVGMarkerElement.refY
Nur lesbar-
Gibt ein
SVGAnimatedLength
-Objekt zurück, das den Wert desrefY
-Attributs des<marker>
enthält. SVGMarkerElement.viewBox
Nur lesbar-
Gibt ein
SVGAnimatedRect
-Objekt zurück, das einSVGRect
enthält, welches die durch dasviewBox
-Attribut am<marker>
-Element gesetzten Werte enthält. SVGMarkerElement.preserveAspectRatio
Nur lesbar-
Gibt ein
SVGPreserveAspectRatio
-Objekt zurück, das die durch daspreserveAspectRatio
-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 aufauto
. SVGMarkerElement.setOrientToAngle()
-
Setzt den Wert des
orient
-Attributs auf einen speziellen Winkelwert.
Beispiele
Das folgende SVG wird in den Beispielen verwendet.
<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.
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.
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