SVGNumber — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGNumber

Beschreibung

SVGNumber ist ein einfaches Wrapper-Objekt um eine Gleitkommazahl. Es kommt im SVG-DOM überall dort vor, wo ein Attribut eine Liste von Zahlen oder eine animierbare Zahl enthält, z. B. in SVGNumberList (Attribut rotate von <text> oder tableValues bei Filter-Primitiven). Einen eigenen Konstruktor gibt es nicht. Neue Instanzen erzeugst du mit SVGSVGElement.prototype.createSVGNumber().

Die einzige Eigenschaft ist value (Typ number), die sich lesen und schreiben lässt. Gehört das Objekt zu einer Liste, die an ein Attribut gebunden ist, wirkt sich eine Änderung an value sofort auf das zugehörige Attribut im Dokument aus. Das ist eine Live-Bindung.

Nützlich ist SVGNumber vor allem, wenn du SVG-Zahlenlisten gezielt per Skript bearbeiten willst, ohne Attribut-Strings selbst zu parsen und neu zusammenzusetzen. Für einfache Fälle ist setAttribute() meist bequemer. Die typisierte API spart aber Umwandlungen zwischen String und Zahl und macht präzise Änderungen an einzelnen Werten möglich.

Rückgabewert

Typ

SVGNumber

Beschreibung

Ein Objekt mit der les- und schreibbaren Eigenschaft value: number.

Beispiele

SVGNumber erzeugen und Wert setzen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const num = svg.createSVGNumber();
console.log(num.value);
num.value = 42.5;
console.log(num.value, num instanceof SVGNumber);

0 42.5 true

Rotationswerte eines <text>-Elements lesen und ändern

// <svg><text id="t" x="10" y="30" rotate="0 10 20">ABC</text></svg>
const text = document.getElementById('t');
const list = text.rotate.baseVal; // SVGNumberList

for (let i = 0; i < list.numberOfItems; i++) {
  console.log(list.getItem(i).value);
}

// Live-Bindung: ändert das Attribut direkt
list.getItem(2).value = 45;
console.log(text.getAttribute('rotate'));

0 10 20 0 10 45

Neue Zahl an eine SVGNumberList anhängen

const svg = document.querySelector('svg');
const text = svg.querySelector('text');
const extra = svg.createSVGNumber();
extra.value = 90;
text.rotate.baseVal.appendItem(extra);
console.log(text.getAttribute('rotate'));

0 10 45 90

// Wichtig · Fallstricke

new SVGNumber() wirft einen TypeError. Instanzen erzeugst du nur über createSVGNumber() an einem <svg>-Element.
Objekte aus animVal sind schreibgeschützt. Wer dort value setzt, löst eine NoModificationAllowedError-DOMException aus. Schreibzugriffe gehören auf baseVal.
Wird ein SVGNumber, das schon zu einer anderen Liste gehört, per appendItem()/insertItemBefore() eingefügt, legen einige Browser eine Kopie an. Spätere Änderungen am ursprünglichen Objekt wirken dann nicht mehr auf die neue Liste. Verlasse dich also nicht auf geteilte Referenzen.
Nicht endliche Werte (NaN, Infinity) führen zu einem TypeError.
Das Interface wird von allen modernen Browsern unterstützt. SVGSVGElement.createSVGNumber() ist seit Langem stabil, das SVG-DOM gilt insgesamt aber als wenig weiterentwickelt.

Siehe auch

SVGNumberList SVGAngle GPUBuffer SVGElement SVGLength