Signatur
Beschreibung
Die schreibgeschützte Eigenschaft viewportElement liefert das Element, das den Viewport (Ansichtsbereich) des aktuellen SVG-Elements festlegt. Ein Viewport ist das Rechteck, in dem gezeichnet wird. Er bestimmt, worauf sich Prozentwerte wie width="50%" beziehen und in welches Koordinatensystem viewBox und preserveAspectRatio abgebildet werden.
In den meisten Fällen ist das Ergebnis das nächste umgebende <svg>-Element. Das gilt auch für verschachtelte <svg>-Elemente innerhalb eines SVG-Dokuments. Beim äußersten <svg> gibt die Eigenschaft null zurück, weil dessen Viewport vom einbettenden Kontext kommt, also vom HTML-Layout oder vom Browserfenster.
Die Eigenschaft ist nützlich, wenn du Prozentangaben selbst in Pixel umrechnen willst, Koordinaten relativ zum richtigen Bezugssystem brauchst oder in Werkzeugen wie Editoren oder Inspektoren die Viewport-Hierarchie eines Elements nachverfolgen willst. Sie unterscheidet sich von ownerSVGElement: Beide zeigen oft auf dasselbe <svg>. Laut Spezifikation beschreibt viewportElement aber ausdrücklich das Element, das den Viewport festlegt, und nicht bloß den nächsten <svg>-Vorfahren.
Rückgabewert
SVGSVGElement), oder null beim äußersten <svg> und bei Elementen ohne passenden Vorfahren (z. B. wenn das Element noch nicht eingehängt ist).Beispiele
Viewport eines Kreises ermitteln
// HTML:
// <svg id="root" width="300" height="200">
// <circle id="c" cx="50" cy="50" r="20" />
// </svg>
const circle = document.getElementById('c');
const root = document.getElementById('root');
console.log(circle.viewportElement === root);
console.log(root.viewportElement);Verschachtelte <svg>-Elemente
// HTML:
// <svg id="outer" width="400" height="300">
// <svg id="inner" x="50" y="50" width="200" height="100">
// <rect id="r" width="50%" height="50%" />
// </svg>
// </svg>
const rect = document.getElementById('r');
console.log(rect.viewportElement.id);
console.log(rect.viewportElement.viewportElement.id);
console.log(rect.viewportElement.viewportElement.viewportElement);Prozentangaben in Pixel umrechnen
// Löst width="50%" gegen den tatsächlichen Viewport auf
const resolveWidth = (el) => {
const vp = el.viewportElement;
if (!vp) return null;
const vpWidth = vp.width.baseVal.value; // SVGAnimatedLength
const len = el.width.baseVal;
return len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE
? (len.valueInSpecifiedUnits / 100) * vpWidth
: len.value;
};
const rect = document.getElementById('r');
console.log(`Breite: ${resolveWidth(rect)}px`);Viewport-Kette für Debugging ausgeben
const viewportChain = (el) => {
const chain = [];
let vp = el.viewportElement;
while (vp) {
chain.push(vp.id || vp.tagName);
vp = vp.viewportElement;
}
return chain;
};
console.log(viewportChain(document.getElementById('r')));// Wichtig · Fallstricke
- Nur lesbar: Wenn du der Eigenschaft einen Wert zuweist, wird das ignoriert. Im Strict Mode wirft die Zuweisung einen
TypeError. null-Fälle: Das äußerste<svg>und Elemente, die noch nicht in ein<svg>eingehängt sind (z. B. direkt nachdocument.createElementNS()), liefernnull. Prüfe den Wert deshalb immer, bevor du auf.widtho. Ä. zugreifst.- Abgrenzung zu
ownerSVGElement: In typischem Markup zeigen beide auf dasselbe Element. Bei Inhalten von<symbol>, die über<use>instanziiert werden, können sich die Werte je nach Browser unterscheiden, denn die Instanzen liegen im Shadow Tree. - Pixel-Koordinaten: Für echte Bildschirmkoordinaten nutze besser
getScreenCTM()odergetBoundingClientRect().viewportElementliefert nur das Bezugselement und berücksichtigt keine Transformationen. - Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Die Eigenschaft gibt es nur an SVG-Elementen, nicht an HTML-Elementen.