Signatur
Beschreibung
Die schreibgeschützte Eigenschaft viewBox der Schnittstelle SVGViewElement liefert ein SVGAnimatedRect-Objekt. Es bildet das viewBox-Attribut des jeweiligen <view>-Elements ab. Ein <view>-Element legt eine benannte Ansicht innerhalb einer SVG-Grafik fest. Diese Ansicht lässt sich über einen Fragment-Bezeichner wie grafik.svg#detail oder über #svgView(...) aufrufen.
Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Das enthaltene Rechteck lässt sich aber über viewBox.baseVal ändern. baseVal ist ein SVGRect mit den Feldern x, y, width und height. viewBox.animVal liefert dagegen den aktuellen, möglicherweise gerade animierten Wert. Dieser ist nur lesbar.
Typische Anwendungen sind:
- Auslesen der Ausschnitte, die in einer Grafik festgelegt sind, zum Beispiel um daraus eine Navigation („Zoom auf Region X“) zu bauen.
- Übertragen einer benannten Ansicht auf das
viewBoxdes äußeren<svg>-Elements, etwa für Zoom-Effekte per Skript. - Anpassen eines festgelegten Ausschnitts zur Laufzeit.
Rückgabewert
baseVal (änderbares SVGRect, entspricht dem Attributwert) und animVal (nur lesbarer, aktuell animierter Wert). Fehlt das Attribut, haben beide Rechtecke in der Regel x, y, width und height gleich 0.Beispiele
viewBox eines view-Elements auslesen
// <svg id="karte" viewBox="0 0 800 600">
// <view id="nord" viewBox="0 0 400 300" />
// </svg>
const view = document.getElementById('nord');
const { x, y, width, height } = view.viewBox.baseVal;
console.log(`Ausschnitt: ${x} ${y} ${width} ${height}`);Benannte Ansicht per Skript auf das SVG übertragen (Zoom)
const svg = document.getElementById('karte');
const zeigeAnsicht = (viewId) => {
const view = svg.querySelector(`view#${viewId}`);
if (!view) return;
const r = view.viewBox.baseVal;
svg.setAttribute('viewBox', `${r.x} ${r.y} ${r.width} ${r.height}`);
};
document.querySelectorAll('button[data-view]').forEach((btn) => {
btn.addEventListener('click', () => zeigeAnsicht(btn.dataset.view));
});Festgelegten Ausschnitt zur Laufzeit verändern
const view = document.querySelector('view#nord');
const rect = view.viewBox.baseVal;
// Ausschnitt nach rechts verschieben und vergrößern
rect.x += 100;
rect.width = 500;
console.log(view.getAttribute('viewBox'));Alle Ansichten einer Grafik auflisten
const ansichten = [...document.querySelectorAll('svg view')].map((v) => {
const { x, y, width, height } = v.viewBox.baseVal;
return { id: v.id, x, y, width, height };
});
console.table(ansichten);// Wichtig · Fallstricke
Schreibgeschützt: Eine Zuweisung wie view.viewBox = ... wird ohne Fehlermeldung ignoriert und wirft im Strict Mode keinen Fehler. Werte ändert man stattdessen über viewBox.baseVal oder mit setAttribute('viewBox', ...).
animVal ist nur lesbar: Ein Schreibversuch auf viewBox.animVal löst einen NoModificationAllowedError aus.
Fehlendes oder ungültiges Attribut: Fehlt das viewBox-Attribut oder ist es ungültig (z. B. mit negativer Breite), liefert baseVal meist ein Rechteck aus lauter Nullen. Vor der Verwendung sollte man daher view.hasAttribute('viewBox') prüfen.
Keine Anzeige-Änderung: Ein <view>-Element wird nicht dargestellt. Eine Änderung seines viewBox wirkt sich erst aus, wenn die Ansicht über einen Fragment-Bezeichner aufgerufen wird. Für einen sichtbaren Effekt überträgt man den Wert auf das <svg>-Element.
Kompatibilität: Alle modernen Browser unterstützen die Eigenschaft. Das Aufrufen einer Ansicht per Fragment-Bezeichner (#id bzw. #svgView()) funktioniert bei SVG-Dateien, die über <img> eingebunden sind, nicht in jedem Browser gleich zuverlässig. Die veraltete Eigenschaft SVGViewElement.viewTarget wurde aus SVG 2 entfernt.