SVGMarkerElement.markerHeight — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.markerHeight

Beschreibung

Die Eigenschaft markerHeight des Interfaces SVGMarkerElement gibt die Höhe des Viewports zurück, in dem der Inhalt eines <marker>-Elements gezeichnet wird. Sie entspricht dem SVG-Attribut markerHeight. Fehlt das Attribut, gilt der Standardwert 3.

Der Rückgabewert ist keine Zahl, sondern ein SVGAnimatedLength-Objekt. Es enthält zwei SVGLength-Objekte: baseVal ist der statische Wert aus dem Attribut. animVal ist der aktuelle Wert, falls gerade eine SMIL-Animation läuft. Den eigentlichen Zahlenwert liest du über markerHeight.baseVal.value. Dieser Wert ist nicht nur lesbar, sondern auch beschreibbar.

Die Einheit hängt vom Attribut markerUnits ab. Beim Standardwert strokeWidth wird die Höhe mit der Strichstärke des Pfads multipliziert, der den Marker nutzt. Bei userSpaceOnUse wird sie in Benutzerkoordinaten angegeben. Typische Anwendungen: Pfeilspitzen oder Punktmarkierungen per Skript abfragen oder dynamisch skalieren, etwa in Diagrammen oder Editoren.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (statischer Wert, SVGLength) und animVal (animierter Wert, nur lesbar). Die Höhe als Zahl steht in baseVal.value.

Beispiele

Markerhöhe auslesen

// HTML: <svg><defs><marker id="pfeil" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7"/></marker></defs></svg>
const marker = document.getElementById('pfeil');
const hoehe = marker.markerHeight;
console.log(hoehe instanceof SVGAnimatedLength);
console.log(hoehe.baseVal.value);
console.log(hoehe.animVal.value);

true 7 7

Pfeilspitze dynamisch vergrößern

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

const skaliereMarker = (faktor) => {
  const { markerWidth, markerHeight } = marker;
  markerWidth.baseVal.value *= faktor;
  markerHeight.baseVal.value *= faktor;
  // Das Attribut wird automatisch synchronisiert
  console.log(marker.getAttribute('markerHeight'));
};

skaliereMarker(2);

14

Marker per Skript erzeugen und Einheiten setzen

const SVG_NS = 'http://www.w3.org/2000/svg';
const marker = document.createElementNS(SVG_NS, 'marker');
marker.id = 'punkt';

// Standardwert ohne Attribut
console.log(marker.markerHeight.baseVal.value);

// Höhe in Millimetern setzen, danach in Benutzereinheiten lesen
marker.markerHeight.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM, 2);
console.log(marker.getAttribute('markerHeight'));

document.querySelector('svg defs').append(marker);
console.log(marker.markerHeight.baseVal.value.toFixed(2));

3 2mm 7.56

// Wichtig · Fallstricke

Schreibgeschützt: Die Eigenschaft selbst kannst du nicht ersetzen. marker.markerHeight = 10 hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändere stattdessen markerHeight.baseVal.value oder nutze setAttribute('markerHeight', ...).
animVal ist nur lesbar: Ein Schreibversuch auf animVal wirft eine NoModificationAllowedError-Ausnahme.
Einheiten: baseVal.value liefert immer Benutzereinheiten. Prozentwerte und relative Einheiten wie em lassen sich erst zuverlässig umrechnen, wenn das Element im Dokument hängt. Den Wert in der ursprünglichen Einheit liest du über valueInSpecifiedUnits und unitType.
markerUnits beachten: Beim Standardwert strokeWidth wächst der Marker mit der Strichstärke mit. Die tatsächlich sichtbare Größe ist dann nicht gleich baseVal.value.
Negative Werte oder 0: Ein negativer Wert ist ein Fehler. Bei 0 wird der Marker nicht gezeichnet.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGMarkerElement SVGMarkerElement.markerWidth SVGMarkerElement.markerUnits SVGMarkerElement.refY SVGAnimatedLength SVGLength SVGAnimationElement.targetElement