SVGTextPositioningElement.rotate — Eigenschaft · JavaScript-Referenz

Signatur

SVGTextPositioningElement.rotate

Beschreibung

Die schreibgeschützte Eigenschaft rotate der Schnittstelle SVGTextPositioningElement spiegelt das SVG-Attribut rotate wider. Dieses Attribut enthält eine Liste von Winkeln in Grad. Jeder Winkel dreht genau ein Zeichen (eine Glyphe) um den eigenen Ankerpunkt, also den Punkt der aktuellen Textposition auf der Grundlinie – nicht um die Mitte der Glyphe.

Zurückgegeben wird ein SVGAnimatedNumberList-Objekt mit zwei Listen: baseVal enthält den statischen Attributwert und lässt sich verändern. animVal enthält den aktuellen, eventuell durch SMIL-Animation (<animate>) veränderten Wert und ist nur lesbar. Beide Listen sind vom Typ SVGNumberList und bieten unter anderem numberOfItems, getItem(), appendItem(), replaceItem(), removeItem() und clear().

Schreibgeschützt ist nur die Eigenschaft selbst: Man kann rotate kein neues Objekt zuweisen. Änderungen an rotate.baseVal wirken dagegen sofort und werden in das rotate-Attribut im DOM übernommen. Das eignet sich gut für Texteffekte wie wellenförmige, „tanzende“ oder schräg gestellte Buchstaben, ohne dass man jedes Zeichen in ein eigenes <tspan> packen muss.

Die Eigenschaft gibt es bei den Elementen <text> und <tspan>, also bei allen, die von SVGTextPositioningElement erben.

Rückgabewert

Typ

SVGAnimatedNumberList

Beschreibung

Ein Objekt mit baseVal (veränderbare SVGNumberList des Attributwerts) und animVal (nur lesbare SVGNumberList des aktuell animierten Werts). Fehlt das Attribut, sind beide Listen leer.

Beispiele

Drehwinkel aus dem rotate-Attribut auslesen

// <svg id="bild" width="300" height="80">
//   <text id="titel" x="10" y="50" rotate="0 15 30 45">Hallo</text>
// </svg>
const text = document.getElementById('titel');
const liste = text.rotate.baseVal;

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

[0, 15, 30, 45] 4

Wellen-Effekt: jedem Buchstaben einen eigenen Winkel geben

const svg = document.getElementById('bild');
const text = document.getElementById('titel');
const liste = text.rotate.baseVal;

liste.clear();
const zeichen = text.textContent.length;
for (let i = 0; i < zeichen; i++) {
  const zahl = svg.createSVGNumber();
  zahl.value = Math.sin(i) * 20; // zwischen -20° und +20°
  liste.appendItem(zahl);
}

// Das Attribut im DOM wurde automatisch aktualisiert
console.log(text.getAttribute('rotate'));

0 16.8294 18.1859 2.8224 -15.136

Animierte „tanzende“ Buchstaben mit requestAnimationFrame

const svg = document.getElementById('bild');
const text = document.getElementById('titel');
const liste = text.rotate.baseVal;

// Liste einmalig mit passenden Einträgen füllen
liste.clear();
for (let i = 0; i < text.textContent.length; i++) {
  liste.appendItem(svg.createSVGNumber());
}

const tick = (zeit) => {
  for (let i = 0; i < liste.numberOfItems; i++) {
    // vorhandene SVGNumber-Objekte direkt ändern, statt neue zu erzeugen
    liste.getItem(i).value = Math.sin(zeit / 300 + i) * 25;
  }
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

// Wichtig · Fallstricke

Schreibgeschützt: text.rotate = … hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändern Sie stattdessen rotate.baseVal oder setzen Sie das Attribut mit setAttribute('rotate', '…').
Weniger Winkel als Zeichen: Stehen in der Liste weniger Werte als Zeichen im Text, gilt der letzte Wert für alle übrigen Zeichen. rotate=\"30\" dreht also jedes Zeichen um 30°.
Drehpunkt: Jede Glyphe dreht sich um ihre Position auf der Grundlinie, nicht um ihren Mittelpunkt. Den ganzen Textblock drehen Sie mit dem Attribut transform.
Zeichen statt Grapheme: Die Zählung folgt den adressierbaren Zeichen. Bei Emojis, kombinierten Zeichen oder Ligaturen kann die Zuordnung von Winkel zu sichtbarer Glyphe abweichen.
animVal ist nur lesbar: Wer darauf schreibend zugreift, löst eine NoModificationAllowedError-DOMException aus.
Neue Einträge: SVGNumber-Objekte erzeugen Sie mit SVGSVGElement.createSVGNumber(). Einen Konstruktor new SVGNumber() gibt es nicht.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Das veraltete Element <tref>, das früher ebenfalls von dieser Schnittstelle erbte, wird nicht mehr unterstützt.

Siehe auch

SVGTextPositioningElement SVGTextPositioningElement.x SVGTextPositioningElement.y SVGTextPositioningElement.dx SVGTextPositioningElement.dy SVGAnimatedNumberList SVGNumberList SVGSVGElement.createSVGNumber()