SVGNumber.value — Eigenschaft · JavaScript-Referenz

Signatur

SVGNumber.value

Beschreibung

SVGNumber.value liefert die Zahl, die ein SVGNumber-Objekt darstellt. Solche Objekte gibt es vor allem als Einträge in einer SVGNumberList. Diese Listen stecken hinter Attributen wie rotate bei <text>/<tspan>, values bei <feColorMatrix>, tableValues bei <feFuncR> und ähnlichen Elementen oder kernelMatrix bei <feConvolveMatrix>. Ein eigenständiges Objekt legt man mit SVGSVGElement.createSVGNumber() an.

Anders als manche Kurzbeschreibungen behaupten, ist die Eigenschaft nicht grundsätzlich schreibgeschützt. Gehört das Objekt zur Basisliste (baseVal) eines Elements, ändert eine Zuweisung an value sofort das zugehörige Attribut im DOM. Gehört es dagegen zur animierten, schreibgeschützten Liste (animVal), wird eine Zuweisung abgelehnt.

Nützlich ist value, wenn du einzelne Zahlen eines SVG-Attributs gezielt lesen oder ändern willst, ohne die Attributzeichenkette selbst zu zerlegen und wieder zusammenzusetzen. Ein typischer Fall ist ein Farbfilter, der in Echtzeit angepasst wird.

Rückgabewert

Typ

number

Beschreibung

Der Zahlenwert als 32-Bit-Gleitkommazahl (float). Beim Setzen wird der Wert auf diese Genauigkeit gerundet.

Beispiele

Eigenständiges SVGNumber anlegen und setzen

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

console.log(num.value); // Startwert
num.value = 2.5;
console.log(num.value);

0 2.5

Drehwinkel einzelner Zeichen aus dem rotate-Attribut lesen

// <text id="label" x="10" y="40" rotate="0 15 30 45">SVG!</text>
const text = document.getElementById('label');
const list = text.rotate.baseVal;

const winkel = [];
for (let i = 0; i < list.numberOfItems; i++) {
  winkel.push(list.getItem(i).value);
}
console.log(winkel);

[0, 15, 30, 45]

Sättigung eines Filters per Schieberegler live ändern

// <filter id="f"><feColorMatrix id="cm" type="saturate" values="1"/></filter>
// <input id="slider" type="range" min="0" max="1" step="0.05" value="1">
const matrix = document.getElementById('cm');
const slider = document.getElementById('slider');

slider.addEventListener('input', () => {
  const eintrag = matrix.values.baseVal.getItem(0);
  eintrag.value = Number(slider.value); // aktualisiert das Attribut sofort
  console.log(matrix.getAttribute('values'));
});

z. B. "0.5" nach Verschieben des Reglers

// Wichtig · Fallstricke

Schreibschutz bei animVal: Ist das SVGNumber Teil einer schreibgeschützten Liste, z. B. element.rotate.animVal, löst eine Zuweisung eine DOMException vom Typ NoModificationAllowedError aus. Ändere daher immer baseVal.
Nicht-endliche Werte: NaN und Infinity führen beim Setzen zu einem TypeError, weil der IDL-Typ float und nicht unrestricted float ist.
Genauigkeit: Der Wert wird als 32-Bit-Gleitkommazahl gespeichert. num.value = 0.1 ergibt beim Lesen deshalb 0.10000000149011612.
Live-Bindung: Objekte aus baseVal sind mit dem Attribut verknüpft. Wird das Attribut später per setAttribute neu geschrieben, können vorher geholte Referenzen veralten. Hole die Einträge bei Bedarf neu.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Nur createSVGNumber() braucht ein SVGSVGElement.

Siehe auch

SVGNumber SVGNumberList SVGSVGElement.createSVGNumber() SVGAnimatedNumberList SVGFEColorMatrixElement SVGLength.value CSSMathInvert.value