</> programmierung.net
Start · Sprachen · JavaScript · Referenz · SVGAnimatedRect.animVal

SVGAnimatedRect.animVal

Eigenschaft

Liefert den aktuellen, ggf. animierten Wert des <code>viewBox</code>-Attributs eines SVG-Elements als schreibgeschütztes Rechteck-Objekt (<code>x</code>, <code>y</code>, <code>width</code>, <code>height</code>).

seit JavaScript Baseline: alle modernen Browser Kategorie: webapi

Signatur

SVGAnimatedRect.animVal

Beschreibung

Die schreibgeschützte Eigenschaft animVal der Schnittstelle SVGAnimatedRect gibt den aktuell wirksamen Wert des viewBox-Attributs zurück. Wenn eine SMIL-Animation (z. B. <animate attributeName="viewBox">) läuft, enthält animVal den Zwischenwert zum jetzigen Zeitpunkt. Ohne Animation stimmt er mit baseVal überein.

Man erreicht die Eigenschaft über element.viewBox.animVal. Das gilt für alle Elemente, die ein viewBox-Attribut unterstützen: <svg>, <symbol>, <marker>, <pattern> und <view>. Das zurückgegebene Objekt hat die Eigenschaften x, y, width und height in Benutzereinheiten.

Einsatzgebiete sind vor allem das Auslesen des sichtbaren Koordinatenbereichs, etwa um Mauskoordinaten in SVG-Koordinaten umzurechnen, um den Fortschritt einer Zoom- oder Schwenk-Animation zu verfolgen oder um Abmessungen für Berechnungen zu bestimmen. Wenn du den Wert ändern willst, nimm baseVal oder setAttribute('viewBox', …).

Rückgabewert

Typ
DOMRectReadOnly | SVGRect | null
Beschreibung
Ein schreibgeschütztes Rechteck mit x, y, width und height, das den aktuell (animiert) wirksamen viewBox beschreibt. Ist kein viewBox-Attribut gesetzt, liefern manche Browser null (z. B. Firefox), andere ein Rechteck mit lauter Nullen.

Beispiele

viewBox eines SVG-Elements auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 200 100');
document.body.append(svg);

const { x, y, width, height } = svg.viewBox.animVal;
console.log(x, y, width, height);
0 0 200 100

Animierten viewBox während einer SMIL-Animation beobachten

document.body.insertAdjacentHTML('beforeend', `
  <svg id="karte" viewBox="0 0 400 400" width="200" height="200">
    <circle cx="200" cy="200" r="50" fill="tomato" />
    <animate attributeName="viewBox" from="0 0 400 400" to="150 150 100 100"
             dur="2s" fill="freeze" />
  </svg>`);

const karte = document.getElementById('karte');

const protokolliere = () => {
  const base = karte.viewBox.baseVal;
  const anim = karte.viewBox.animVal;
  console.log(`Basis: ${base.width} | Animiert: ${anim.width.toFixed(1)}`);
};

const timer = setInterval(protokolliere, 500);
setTimeout(() => clearInterval(timer), 2500);
Basis: 400 | Animiert: 400.0 Basis: 400 | Animiert: 325.0 … Basis: 400 | Animiert: 100.0

Mausposition in viewBox-Koordinaten umrechnen

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

svg.addEventListener('click', (event) => {
  const vb = svg.viewBox.animVal;
  const rect = svg.getBoundingClientRect();
  // Einfache Umrechnung (ohne preserveAspectRatio-Letterboxing)
  const svgX = vb.x + ((event.clientX - rect.left) / rect.width) * vb.width;
  const svgY = vb.y + ((event.clientY - rect.top) / rect.height) * vb.height;
  console.log(`SVG-Koordinaten: ${svgX.toFixed(1)}, ${svgY.toFixed(1)}`);
});
SVG-Koordinaten: 123.4, 56.7

Schreibversuch schlägt fehl – baseVal verwenden

const svg = document.querySelector('svg[viewBox]');

try {
  svg.viewBox.animVal.width = 500; // schreibgeschützt
} catch (err) {
  console.log(err.name);
}

// Richtig: Basiswert ändern
svg.viewBox.baseVal.width = 500;
console.log(svg.getAttribute('viewBox'));
NoModificationAllowedError 0 0 500 100

// Wichtig · Fallstricke

  • Schreibgeschützt: Sowohl die Eigenschaft als auch das zurückgegebene Rechteck lassen sich nicht ändern. Zuweisungen an animVal.x usw. lösen je nach Browser einen NoModificationAllowedError aus oder werden stillschweigend ignoriert (im nicht-strikten Modus). Für Änderungen gibt es baseVal.
  • Fehlendes Attribut: Ohne viewBox-Attribut unterscheiden sich die Browser: Firefox gibt null zurück, Chromium und WebKit ein Rechteck mit 0 0 0 0. Prüfe deshalb vorher mit element.hasAttribute('viewBox').
  • Nur SMIL: animVal spiegelt nur SMIL-Animationen wider. Änderungen über CSS-Animationen, die Web Animations API oder JavaScript-Zeitsteuerung am Attribut erscheinen stattdessen direkt in baseVal.
  • Live-Objekt: In den meisten Browsern ist das zurückgegebene Objekt „live“. Willst du einen festen Zwischenstand behalten, kopiere die Werte (z. B. per Destrukturierung).
  • Typ: In SVG 1.1 war der Typ SVGRect, in SVG 2 heißt er DOMRectReadOnly. Die Eigenschaften sind in beiden Fällen dieselben.
  • Kompatibilität: Wird seit Langem von allen modernen Browsern unterstützt. Das Umrechnungsbeispiel oben berücksichtigt preserveAspectRatio nicht. Genauer ist getScreenCTM().inverse().

Siehe auch

SVGAnimatedRect SVGAnimatedRect.baseVal SVGSVGElement.viewBox DOMRectReadOnly SVGGraphicsElement.getScreenCTM() SVGPreserveAspectRatio StorageEvent.newValue
← Vorheriger Eintrag SVGAnimatedRect