SVGAnimatedRect.baseVal — Eigenschaft · JavaScript-Referenz

Signatur

get SVGAnimatedRect.baseVal

Beschreibung

baseVal gibt den Basiswert eines rechteckigen SVG-Attributs zurück. In der Praxis ist das fast immer das viewBox-Attribut von Elementen wie <svg>, <symbol>, <marker>, <pattern> oder <view>, das Sie über element.viewBox.baseVal erreichen. Das zurückgegebene Objekt bietet die Eigenschaften x, y, width und height.

Die Eigenschaft selbst ist schreibgeschützt: Sie können baseVal kein neues Objekt zuweisen. Das zurückgegebene SVGRect ist aber live mit dem Attribut verknüpft. Ändern Sie z. B. baseVal.width, wird das viewBox-Attribut sofort angepasst. Umgekehrt spiegelt das Objekt jede Änderung über setAttribute('viewBox', …) wider.

Damit eignet sich baseVal gut für interaktives Zoomen und Verschieben (Pan) von SVG-Grafiken, ohne dass Sie den Attribut-String selbst zerlegen und neu zusammensetzen müssen. Den Wert, den eine laufende SMIL-Animation gerade anzeigt, liefert dagegen animVal. Dieser Wert ist vollständig schreibgeschützt.

Rückgabewert

Typ

SVGRect | null

Beschreibung

Ein live verknüpftes SVGRect (in modernen Browsern ein DOMRect-artiges Objekt) mit x, y, width und height des nicht animierten viewBox-Werts. Wenn das Attribut fehlt, verhalten sich die Browser unterschiedlich: Manche liefern null, andere ein Rechteck mit lauter Nullen.

Beispiele

viewBox auslesen

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

const { x, y, width, height } = svg.viewBox.baseVal;
console.log(x, y, width, height);

0 0 200 100

Zoom per Mausrad über baseVal

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

svg.addEventListener('wheel', (event) => {
  event.preventDefault();
  const vb = svg.viewBox.baseVal;
  const factor = event.deltaY > 0 ? 1.1 : 0.9;

  // Um die Mitte herum zoomen
  const cx = vb.x + vb.width / 2;
  const cy = vb.y + vb.height / 2;
  vb.width *= factor;
  vb.height *= factor;
  vb.x = cx - vb.width / 2;
  vb.y = cy - vb.height / 2;

  // Das Attribut ist automatisch aktualisiert
  console.log(svg.getAttribute('viewBox'));
}, { passive: false });

z. B. "-10 -5 220 110"

Verschieben (Pan) und Live-Verknüpfung

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

const vb = svg.viewBox.baseVal;
vb.x += 25; // nach rechts verschieben
console.log(svg.getAttribute('viewBox'));

// Änderung am Attribut wirkt auf dasselbe Objekt zurück
svg.setAttribute('viewBox', '10 10 50 50');
console.log(vb.width);

25 0 100 100 50

Fehlendes viewBox-Attribut sicher behandeln

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

const getViewBox = (el) => {
  const vb = el.viewBox?.baseVal;
  if (!el.hasAttribute('viewBox') || !vb) return null;
  return { x: vb.x, y: vb.y, width: vb.width, height: vb.height };
};

console.log(getViewBox(svg));

null

// Wichtig · Fallstricke

Nicht neu zuweisen: svg.viewBox.baseVal = … hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen die einzelnen Eigenschaften des zurückgegebenen Objekts oder verwenden Sie setAttribute('viewBox', …).
Fehlendes Attribut: Ohne viewBox liefert Firefox null. Chromium und WebKit geben ein Rechteck mit 0 0 0 0 zurück. Prüfen Sie deshalb vorher mit hasAttribute('viewBox').
Live-Objekt: Wenn Sie den ursprünglichen Wert brauchen (z. B. um später auf den Ausgangszoom zurückzusetzen), kopieren Sie die Werte in ein eigenes Objekt. Eine gespeicherte Referenz ändert sich sonst mit.
Animationen: Während einer SMIL-Animation (<animate attributeName=\"viewBox\">) zeigt baseVal weiterhin den statischen Attributwert. Den gerade dargestellten Wert liefert animVal.
Negative Werte für width oder height machen den viewBox ungültig, und das Element wird nicht gerendert.
Wird in allen aktuellen Browsern unterstützt.

Siehe auch

SVGAnimatedRect SVGAnimatedRect.animVal SVGRect SVGSVGElement Element.setAttribute() Window.speechSynthesis