SVGMarkerElement - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

SVGMarkerElement

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das SVGMarkerElement Interface bietet Zugriff auf die Eigenschaften von <marker>-Elementen sowie Methoden, um diese zu manipulieren. 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 repräsentierten <marker>-Elements oder wirken auf diese.

In diesem Artikel

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von seinem Eltern-Element, SVGElement.

SVGMarkerElement.markerUnits Schreibgeschützt

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

SVG_MARKERUNITS_UNKNOWN, was bedeutet, dass das markerUnits-Attribut einen Wert hat, der von den beiden vordefinierten Schlüsselwörtern abweicht.

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

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

SVGMarkerElement.markerWidth Schreibgeschützt

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

SVGMarkerElement.markerHeight Schreibgeschützt

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

SVGMarkerElement.orientType Schreibgeschützt

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

SVG_MARKER_ORIENT_UNKNOWN, was bedeutet, dass das orient-Attribut einen Wert hat, der von den beiden vordefinierten Schlüsselwörtern abweicht.

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

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

SVGMarkerElement.orient

Ein String, der beschreibt, wie der Marker bei seiner Positionierung auf der Form rotiert wird. Er spiegelt das orient-Attribut des <marker>-Elements wider.

SVGMarkerElement.orientAngle Schreibgeschützt

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

SVGMarkerElement.refX Schreibgeschützt

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

SVGMarkerElement.refY Schreibgeschützt

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

SVGMarkerElement.viewBox Schreibgeschützt

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

SVGMarkerElement.preserveAspectRatio Schreibgeschützt

Gibt ein SVGPreserveAspectRatio-Objekt zurück, welches die durch das preserveAspectRatio-Attribut auf dem <marker>-Ansichtsfenster festgelegten Werte enthält.

Instanz-Methoden

Dieses Interface erbt auch Methoden von seinem Eltern-Element, SVGElement.

SVGMarkerElement.setOrientToAuto()

Setzt den Wert des orient-Attributs auf auto.

SVGMarkerElement.setOrientToAngle()

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

Beispiele

Das folgende SVG wird in den Beispielen referenziert.

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

Aktualisieren des Orientierungswinkels

Im folgenden Beispiel wird der Wert des orient-Attributs mit setOrientToAngle() aktualisiert, indem ein SVGAngle verwendet wird, der mit SVGSVGElement.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

Spezifikation

Scalable Vector Graphics (SVG) 2
# InterfaceSVGMarkerElement

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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