SVGViewElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGViewElement extends SVGElement

Beschreibung

Das Interface SVGViewElement steht für das SVG-Element <view>. Mit einem <view> legt man eine benannte Ansicht einer SVG-Grafik fest, also einen bestimmten Bildausschnitt (viewBox) und dessen Skalierungsverhalten (preserveAspectRatio). Aufgerufen wird die Ansicht über einen Fragment-Bezeichner in der URL, z. B. karte.svg#nordansicht. Das ist praktisch für SVG-Sprites, Karten oder Diagramme, bei denen du gezielt einen Ausschnitt zeigen willst.

Das Interface erbt von SVGElement (und damit von Element, Node und EventTarget) und hat zwei eigene Eigenschaften, die nur gelesen werden können:

viewBox – ein SVGAnimatedRect mit dem Ausschnitt aus dem Attribut viewBox (x, y, width, height).
preserveAspectRatio – ein SVGAnimatedPreserveAspectRatio mit Ausrichtung (align) und Verhalten (meetOrSlice).

Beide Eigenschaften haben die typische Aufteilung in baseVal (den tatsächlichen, änderbaren Attributwert) und animVal (den aktuellen, eventuell animierten Wert, nur lesbar). Eigene Methoden hat das Interface nicht; zum Bearbeiten schreibst du in baseVal oder setzt die Attribute mit setAttribute().

Rückgabewert

Typ

SVGViewElement

Beschreibung

Instanzen bekommst du z. B. über document.createElementNS("http://www.w3.org/2000/svg", "view") oder querySelector("view").

Beispiele

view-Element per JavaScript anlegen

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

const view = document.createElementNS(SVG_NS, "view");
view.id = "detail";
view.setAttribute("viewBox", "50 50 100 100");
view.setAttribute("preserveAspectRatio", "xMidYMid slice");
svg.append(view);

console.log(view instanceof SVGViewElement);
console.log(view.viewBox.baseVal.width);

true 100

viewBox und preserveAspectRatio auslesen

const view = document.querySelector("view#detail");
const { x, y, width, height } = view.viewBox.baseVal;
console.log(`Ausschnitt: ${x} ${y} ${width} ${height}`);

const par = view.preserveAspectRatio.baseVal;
console.log(par.align === SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID);
console.log(par.meetOrSlice === SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE);

Ausschnitt: 50 50 100 100 true true

Ausschnitt ändern und Ansicht aufrufen

const view = document.querySelector("view#detail");

// Ausschnitt direkt über baseVal ändern
const rect = view.viewBox.baseVal;
rect.x = 0;
rect.y = 0;
rect.width = 200;
rect.height = 200;
console.log(view.getAttribute("viewBox"));

// Inline-SVG: Ansicht über den URL-Hash aktivieren
location.hash = "detail";

// Externe SVG-Datei mit dieser Ansicht einbinden
const img = document.createElement("img");
img.src = "grafik.svg#detail";
document.body.append(img);

0 0 200 200

// Wichtig · Fallstricke

SVG-Elemente musst du mit createElementNS() und dem SVG-Namensraum anlegen. document.createElement(\"view\") liefert ein unbekanntes HTML-Element und kein SVGViewElement.
viewBox und preserveAspectRatio kannst du nicht neu zuweisen. Änderungen laufen über baseVal oder setAttribute(), animVal kann nur gelesen werden.
Ohne viewBox-Attribut sind die Werte von viewBox.baseVal auf 0 gesetzt. Prüfe das mit hasAttribute(\"viewBox\").
Die Attribute zoomAndPan und viewTarget aus SVG 1.1 sind veraltet bzw. in SVG 2 entfernt. Verlass dich nicht darauf.
Neben #id gibt es die Fragment-Syntax #svgView(viewBox(0,0,100,100)). Wie gut die Browser sie unterstützen, ist unterschiedlich, besonders bei <img> und CSS-background-image. Teste sie deshalb in allen Zielbrowsern.
Das Interface selbst wird in allen modernen Browsern unterstützt.

Siehe auch

SVGLineElement SVGSetElement SVGUseElement SVGAElement SVGDefsElement