SVGAnimatedRect — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAnimatedRect

Beschreibung

SVGAnimatedRect ist der Typ, den SVG-Elemente für Attribute zurückgeben, die ein Rechteck beschreiben und per SMIL (<animate>) animiert werden können. Der wichtigste Anwendungsfall ist die Eigenschaft viewBox von SVGSVGElement, SVGSymbolElement, SVGMarkerElement, SVGPatternElement und SVGViewElement.

Die Schnittstelle hat zwei schreibgeschützte Eigenschaften:

baseVal: ein DOMRect (früher SVGRect) mit dem im Attribut gesetzten Basiswert. Seine Felder x, y, width und height sind beschreibbar, Änderungen wirken sich direkt auf das Attribut aus.
animVal: ein schreibgeschütztes DOMRectReadOnly mit dem aktuell wirksamen Wert, also inklusive einer laufenden Animation. Ohne Animation entspricht er baseVal.

Man verwendet SVGAnimatedRect in der Praxis, um die viewBox einer Grafik auszulesen oder programmatisch zu ändern, etwa für Zoom- und Schwenk-Funktionen (Pan & Zoom), ohne mit setAttribute() Zeichenketten zusammenbauen und wieder zerlegen zu müssen.

Rückgabewert

Typ

SVGAnimatedRect

Beschreibung

Wird nicht direkt erzeugt, sondern z. B. von SVGSVGElement.viewBox geliefert. Bietet baseVal (DOMRect) und animVal (DOMRectReadOnly).

Beispiele

viewBox auslesen

// <svg id="grafik" viewBox="0 0 200 100">...</svg>
const svg = document.getElementById('grafik');
const viewBox = svg.viewBox; // SVGAnimatedRect

console.log(viewBox instanceof SVGAnimatedRect);
const { x, y, width, height } = viewBox.baseVal;
console.log(`viewBox: ${x} ${y} ${width} ${height}`);

true viewBox: 0 0 200 100

Einfaches Zoomen über baseVal

const svg = document.querySelector('svg');

const zoom = (faktor) => {
  const vb = svg.viewBox.baseVal;
  const cx = vb.x + vb.width / 2;
  const cy = vb.y + vb.height / 2;
  vb.width /= faktor;
  vb.height /= faktor;
  vb.x = cx - vb.width / 2;
  vb.y = cy - vb.height / 2;
};

zoom(2); // hineinzoomen um Faktor 2
console.log(svg.getAttribute('viewBox'));

50 25 100 50

Basis- und Animationswert vergleichen

// <svg viewBox="0 0 100 100">
//   <animate attributeName="viewBox" from="0 0 100 100" to="0 0 50 50" dur="2s" fill="freeze" />
// </svg>
const svg = document.querySelector('svg');

setTimeout(() => {
  const { baseVal, animVal } = svg.viewBox;
  console.log('Basis:', baseVal.width, '| aktuell:', animVal.width);
}, 2500);

Basis: 100 | aktuell: 50

Fehlende viewBox erkennen und setzen

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

if (!svg.hasAttribute('viewBox')) {
  svg.setAttribute('viewBox', '0 0 300 150');
}
console.log(svg.viewBox.baseVal.width, svg.viewBox.baseVal.height);

300 150

// Wichtig · Fallstricke

Fehlendes Attribut: Ohne viewBox-Attribut ist baseVal je nach Browser null oder ein Rechteck mit lauter Nullen. Prüfen Sie deshalb vorher mit hasAttribute('viewBox').
Schreibschutz: baseVal und animVal selbst lassen sich nicht neu zuweisen (svg.viewBox.baseVal = … hat keine Wirkung bzw. wirft im strikten Modus einen Fehler). Ändern Sie stattdessen die einzelnen Felder von baseVal oder nutzen Sie setAttribute().
animVal nicht beschreibbar: Schreibversuche auf animVal werden ignoriert oder werfen eine Ausnahme.
Typ-Änderung: In SVG 2 wurde SVGRect durch DOMRect ersetzt; ältere Dokumentationen und Browser sprechen noch von SVGRect. Das Verhalten ist gleich.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. SMIL-Animationen (und damit ein von baseVal abweichendes animVal) funktionieren in modernen Browsern, CSS-Animationen wirken sich jedoch nicht auf viewBox aus.

Siehe auch

SVGSVGElement DOMRect DOMRectReadOnly SVGAnimatedLength SVGAnimatedPreserveAspectRatio