SVGElement: viewportElement-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die viewportElement-Eigenschaft des SVGElement-Interfaces repräsentiert das SVGElement, welches den aktuellen Ansichtsbereich (Viewport) festgelegt hat. Oft ist dies das nächstgelegene Vorfahren-<svg>-Element. null, wenn das gegebene Element das äußerste <svg>-Element ist.

Wert

Ein SVGElement.

Beispiele

Abrufen des viewportElement

html
<svg id="outerSvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <svg id="innerSvg" x="10" y="10" width="100" height="100">
    <circle id="circle" cx="50" cy="50" r="40" fill="blue"></circle>
  </svg>
</svg>
js
const circle = document.getElementById("circle");
const innerSvg = document.getElementById("innerSvg");
const outerSvg = document.getElementById("outerSvg");

console.log(circle.viewportElement); // Output: <svg id="innerSvg">...</svg>
console.log(innerSvg.viewportElement); // Output: <svg id="outerSvg">...</svg>
console.log(outerSvg.viewportElement); // Output: null

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGElement__viewportElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch