SVGMarkerElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGMarkerElement extends SVGElement

Beschreibung

SVGMarkerElement ist die DOM-Schnittstelle für <marker>-Elemente. Ein Marker ist eine wiederverwendbare Grafik, die über die Attribute bzw. CSS-Eigenschaften marker-start, marker-mid und marker-end an die Eckpunkte von <path>, <line>, <polyline> und <polygon> angehängt wird. Typische Anwendungen sind Pfeilspitzen in Diagrammen, Punkte an Datenpunkten oder Richtungsanzeiger in Flussdiagrammen.

Die Schnittstelle erbt von SVGElement und bringt folgende Eigenschaften mit (alle schreibgeschützt, aber mit animierbaren Werten über baseVal/animVal):

markerUnits (SVGAnimatedEnumeration): Koordinatensystem für Breite/Höhe – SVG_MARKERUNITS_USERSPACEONUSE (1) oder SVG_MARKERUNITS_STROKEWIDTH (2, Standard).
markerWidth, markerHeight (SVGAnimatedLength): Größe des Marker-Viewports (Standard: 3).
refX, refY (SVGAnimatedLength): Referenzpunkt, der genau auf dem Eckpunkt des Pfads sitzt.
orientType (SVGAnimatedEnumeration): SVG_MARKER_ORIENT_AUTO (1), SVG_MARKER_ORIENT_ANGLE (2) oder SVG_MARKER_ORIENT_UNKNOWN (0).
orientAngle (SVGAnimatedAngle): fester Drehwinkel, wenn orient ein Winkel ist.
orient (string, SVG 2): spiegelt das Attribut orient direkt wider.
viewBox (SVGAnimatedRect) und preserveAspectRatio (SVGAnimatedPreserveAspectRatio).

Dazu kommen zwei Methoden: setOrientToAuto() setzt orient="auto", sodass sich der Marker an der Pfadrichtung ausrichtet, und setOrientToAngle(angle) setzt einen festen Winkel über ein SVGAngle-Objekt. Marker werden nie direkt gerendert – nur, wenn sie über url(#id) referenziert werden.

Parameter

Name	Typ	Default	Beschreibung
$angle Pflicht	SVGAngle		Nur für `setOrientToAngle(angle)`: Winkel-Objekt, erzeugt z. B. mit `svgRoot.createSVGAngle()`.

Rückgabewert

Typ

SVGMarkerElement

Beschreibung

Instanzen erhält man über document.createElementNS('http://www.w3.org/2000/svg', 'marker') oder DOM-Abfragen wie querySelector('marker'). Die Methoden setOrientToAuto() und setOrientToAngle() geben undefined zurück.

Beispiele

Pfeilspitzen-Marker dynamisch erzeugen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('viewBox', '0 0 200 100');

const defs = document.createElementNS(NS, 'defs');
const marker = document.createElementNS(NS, 'marker');
marker.id = 'pfeil';
marker.setAttribute('viewBox', '0 0 10 10');
marker.setAttribute('refX', '10');
marker.setAttribute('refY', '5');
marker.setAttribute('markerWidth', '6');
marker.setAttribute('markerHeight', '6');
marker.setOrientToAuto(); // entspricht orient="auto"

const spitze = document.createElementNS(NS, 'path');
spitze.setAttribute('d', 'M0,0 L10,5 L0,10 Z');
spitze.setAttribute('fill', 'crimson');
marker.append(spitze);
defs.append(marker);

const linie = document.createElementNS(NS, 'line');
Object.entries({ x1: 10, y1: 50, x2: 180, y2: 20, stroke: 'black', 'marker-end': 'url(#pfeil)' })
  .forEach(([k, v]) => linie.setAttribute(k, v));

svg.append(defs, linie);
document.body.append(svg);

console.log(marker instanceof SVGMarkerElement);
console.log(marker.orientType.baseVal === SVGMarkerElement.SVG_MARKER_ORIENT_AUTO);

true true

Festen Drehwinkel per setOrientToAngle setzen

// <svg id="diagramm">…<marker id="pfeil" orient="auto">…</marker>…</svg>
const svg = document.querySelector('#diagramm');
const marker = svg.querySelector('#pfeil');

const winkel = svg.createSVGAngle();
winkel.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 45);
marker.setOrientToAngle(winkel);

console.log(marker.getAttribute('orient'));
console.log(marker.orientType.baseVal); // 2 = ANGLE
console.log(marker.orientAngle.baseVal.value);

45 2 45

Marker-Geometrie auslesen und skalieren

const marker = document.querySelector('marker#pfeil');

const { markerWidth, markerHeight, refX, markerUnits } = marker;
console.log(markerWidth.baseVal.value, markerHeight.baseVal.value);
console.log(refX.baseVal.value);
console.log(markerUnits.baseVal === SVGMarkerElement.SVG_MARKERUNITS_STROKEWIDTH
  ? 'skaliert mit stroke-width'
  : 'Benutzerkoordinaten');

// Marker doppelt so groß machen
markerWidth.baseVal.value *= 2;
markerHeight.baseVal.value *= 2;
console.log(marker.getAttribute('markerWidth'));

6 6 10 skaliert mit stroke-width 12

Siehe auch

SVGMaskElement SVGFilterElement SVGImageElement SVGPatternElement SVGAElement SensorErrorEvent