SVGSVGElement.createSVGNumber() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.createSVGNumber()

Beschreibung

Die Methode createSVGNumber() des SVGSVGElement-Interfaces erzeugt ein neues SVGNumber-Objekt außerhalb des Dokumentbaums. Das Objekt hat nur die Eigenschaft value, und die startet bei 0. Weil es mit keinem Attribut verknüpft ist, hat eine Änderung von value zunächst keine sichtbare Wirkung.

Wichtig wird die Methode bei Listen vom Typ SVGNumberList. Ein Beispiel ist das Attribut rotate von <text>-Elementen (SVGTextElement.rotate.baseVal). Methoden wie appendItem(), insertItemBefore() oder replaceItem() erwarten ein SVGNumber-Objekt. Einen öffentlichen Konstruktor new SVGNumber() gibt es nicht. Deshalb ist createSVGNumber() der übliche Weg, ein solches Objekt zu bekommen.

Sobald das Objekt in eine Liste eingefügt ist, schreibt der Browser Änderungen an der Liste in das zugehörige Attribut zurück. So lassen sich numerische Attributlisten bearbeiten, ohne Zeichenketten zu zerlegen und neu zusammenzusetzen.

Rückgabewert

Typ

SVGNumber

Beschreibung

Ein neues SVGNumber-Objekt mit value === 0, das zu keinem Element gehört.

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); // Startwert

num.value = 42.5;
console.log(num.value);
console.log(num instanceof SVGNumber);

0 42.5 true

Zeichen in einem <text> einzeln drehen (rotate-Liste)

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '80');

const text = document.createElementNS(NS, 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '50');
text.textContent = 'Hallo';
svg.append(text);
document.body.append(svg);

// Für jedes Zeichen einen Drehwinkel an die Liste anhängen
const rotateList = text.rotate.baseVal;
[0, 15, 30, 45, 60].forEach((winkel) => {
  const n = svg.createSVGNumber();
  n.value = winkel;
  rotateList.appendItem(n);
});

console.log(text.getAttribute('rotate'));

0 15 30 45 60

Einen Eintrag in einer SVGNumberList ersetzen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const text = document.createElementNS(NS, 'text');
text.setAttribute('rotate', '10 20 30');
svg.append(text);

const ersatz = svg.createSVGNumber();
ersatz.value = 90;
text.rotate.baseVal.replaceItem(ersatz, 1);

console.log(text.getAttribute('rotate'));
console.log(text.rotate.baseVal.numberOfItems);

10 90 30 3

// Wichtig · Fallstricke

Kein Konstruktor: new SVGNumber() löst einen TypeError aus. Nur createSVGNumber() liefert ein neues Objekt.
Nur auf <svg>-Elementen: Die Methode gibt es ausschließlich auf SVGSVGElement. Ein Element, das mit document.createElement('svg') (ohne Namespace) erzeugt wurde, ist ein HTMLUnknownElement und hat diese Methode nicht. Verwende stattdessen createElementNS('http://www.w3.org/2000/svg', 'svg').
Einfügen kann kopieren: Beim Einfügen in eine Liste speichert der Browser je nach Umsetzung eine Kopie des Objekts. Das ursprüngliche Objekt danach noch zu ändern, wirkt sich unter Umständen nicht auf das Attribut aus. Hole den Eintrag deshalb zuverlässig über list.getItem(i).
Nur baseVal bearbeiten: animVal ist schreibgeschützt. Änderungen immer über baseVal vornehmen.
Zahlentyp: value wird als Gleitkommazahl einfacher Genauigkeit (32 Bit) gespeichert. Sehr genaue Werte können daher leicht gerundet werden.
Kompatibilität: Die Methode wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). In SVG 2 sind die Listen-Interfaces nicht mehr so wichtig wie früher. Für einfache Fälle reicht oft setAttribute() mit einer Zeichenkette.

Siehe auch

SVGSVGElement SVGNumber SVGNumberList SVGSVGElement.createSVGLength() SVGSVGElement.createSVGAngle() SVGSVGElement.createSVGPoint() Document.createElementNS()