SVGMarkerElement.viewBox — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.viewBox

Beschreibung

Die Eigenschaft viewBox der Schnittstelle SVGMarkerElement gibt das viewBox-Attribut des <marker>-Elements als SVGAnimatedRect zurück. Die viewBox legt das Koordinatensystem im Inneren des Markers fest, also den Ausschnitt (x, y, width, height), der in die durch markerWidth und markerHeight festgelegte Fläche eingepasst wird.

Das zurückgegebene Objekt hat zwei Eigenschaften: baseVal ist ein DOMRect bzw. SVGRect mit dem aktuell im Attribut gesetzten Wert. Er lässt sich direkt ändern, und die Änderung wird ins Attribut zurückgeschrieben. animVal ist schreibgeschützt und enthält den Wert, der gerade tatsächlich gilt, also auch während einer SMIL-Animation.

Gebraucht wird die Eigenschaft vor allem, wenn Pfeilspitzen, Punkte oder andere Linienmarker per Skript skaliert, zugeschnitten oder ausgewertet werden sollen, zum Beispiel in Diagramm- und Graph-Bibliotheken. Die Eigenschaft viewBox selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen, die Werte von baseVal lassen sich aber ändern.

Rückgabewert

Typ

SVGAnimatedRect

Beschreibung

Objekt mit baseVal (änderbares DOMRect) und animVal (schreibgeschütztes DOMRect). Ist kein viewBox-Attribut gesetzt, haben beide die Werte 0, 0, 0, 0.

Beispiele

viewBox eines Pfeil-Markers auslesen

document.body.insertAdjacentHTML('beforeend', `
<svg width="200" height="60">
  <defs>
    <marker id="pfeil" viewBox="0 0 10 10" refX="5" refY="5"
            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <line x1="10" y1="30" x2="180" y2="30" stroke="black" marker-end="url(#pfeil)" />
</svg>`);

const marker = document.getElementById('pfeil');
const { x, y, width, height } = marker.viewBox.baseVal;
console.log(`viewBox: ${x} ${y} ${width} ${height}`);

viewBox: 0 0 10 10

viewBox per Skript ändern (Pfeilspitze zuschneiden)

const marker = document.getElementById('pfeil');
const box = marker.viewBox.baseVal;

// Nur die rechte Hälfte der Pfeilspitze anzeigen
box.x = 5;
box.width = 5;

// Die Änderung wird ins Attribut zurückgeschrieben
console.log(marker.getAttribute('viewBox'));

5 0 5 10

Fehlendes viewBox-Attribut erkennen

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

const hatViewBox = marker.hasAttribute('viewBox');
const { width, height } = marker.viewBox.baseVal;
console.log(hatViewBox, width, height);

// Sicher setzen über das Attribut
marker.setAttribute('viewBox', '0 0 20 20');
console.log(marker.viewBox.baseVal.width);

false 0 0 20

// Wichtig · Fallstricke

Schreibgeschützt: marker.viewBox = … hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändern Sie stattdessen viewBox.baseVal.x/y/width/height oder nutzen Sie setAttribute('viewBox', …).
Fehlendes Attribut: Ohne viewBox liefert baseVal lauter Nullen. Prüfen Sie mit hasAttribute('viewBox'), ob wirklich ein Wert gesetzt ist.
Ungültige Werte: Negative Werte für width oder height sind ein Fehler, ein Wert von 0 schaltet das Rendern des Markers ab.
animVal: Fürs Auslesen des gerade angezeigten Werts während SMIL-Animationen animVal verwenden. Viele Browser liefern dort aber identische Werte wie bei baseVal.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Die Klasse von baseVal heißt je nach Browser SVGRect oder DOMRect.
Die viewBox wirkt immer zusammen mit preserveAspectRatio sowie markerWidth/markerHeight. Wenn sich eine Pfeilspitze unerwartet verzerrt, liegt es oft an diesen Eigenschaften.

Siehe auch

SVGMarkerElement SVGAnimatedRect SVGMarkerElement.preserveAspectRatio SVGMarkerElement.markerWidth SVGMarkerElement.markerHeight SVGSVGElement.viewBox MathMLAnchorElement.username