SVGTextPathElement.side — Eigenschaft · JavaScript-Referenz

Signatur

SVGTextPathElement.side

Beschreibung

Die Eigenschaft side des SVGTextPathElement spiegelt das SVG-2-Attribut side des Elements <textPath> wider. Sie legt fest, ob der Text links (Standard) oder rechts vom Pfad steht, jeweils bezogen auf die Laufrichtung des Pfads. Mit side="right" wird der Text im Grunde an der Gegenseite des Pfads gespiegelt und läuft in umgekehrter Richtung. So lässt sich zum Beispiel Text auf die Innenseite eines Kreises setzen, ohne dafür den Pfad neu zu zeichnen.

Zurückgegeben wird ein SVGAnimatedEnumeration-Objekt. Dessen Eigenschaft baseVal enthält den im Attribut gesetzten Wert als Zahl. animVal enthält den aktuellen Wert, also gegebenenfalls den Wert während einer SMIL-Animation. Die Zahlen bedeuten: 0 = unbekannt, 1 = left, 2 = right.

Die Eigenschaft selbst ist schreibgeschützt. Den Wert ändern kannst du über baseVal oder, besser unterstützt, über setAttribute("side", "right"). Nützlich ist side vor allem bei dynamischen Beschriftungen: Kreisdiagramme, Stempel-Logos oder Beschriftungen an Kurven, deren Lesbarkeit von der Seite abhängt.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Objekt mit baseVal (Attributwert) und animVal (aktueller, ggf. animierter Wert). Die Werte sind Zahlen: 0 = unbekannt, 1 = left, 2 = right.

Beispiele

Seite eines textPath auslesen

// <svg><path id="kreis" d="M 50,100 a 50,50 0 1,1 100,0 a 50,50 0 1,1 -100,0"/>
//   <text><textPath id="tp" href="#kreis" side="right">Rundherum</textPath></text></svg>
const tp = document.getElementById('tp');

if ('side' in tp) {
  const namen = { 0: 'unbekannt', 1: 'left', 2: 'right' };
  console.log(namen[tp.side.baseVal]);
} else {
  console.log('side wird nicht unterstützt:', tp.getAttribute('side'));
}

right

Text per Knopfdruck auf die andere Pfadseite setzen

const tp = document.querySelector('textPath');
const button = document.querySelector('#umschalten');

button.addEventListener('click', () => {
  const aktuell = tp.getAttribute('side') ?? 'left';
  // setAttribute funktioniert auch ohne DOM-Unterstützung von side
  tp.setAttribute('side', aktuell === 'left' ? 'right' : 'left');
  console.log('Neue Seite:', tp.getAttribute('side'));
});

Neue Seite: right

Dynamisch erzeugtes textPath mit Feature-Erkennung

const SVG_NS = 'http://www.w3.org/2000/svg';
const text = document.createElementNS(SVG_NS, 'text');
const tp = document.createElementNS(SVG_NS, 'textPath');
tp.setAttribute('href', '#kreis');
tp.setAttribute('side', 'right');
tp.textContent = 'Innenbeschriftung';
text.append(tp);
document.querySelector('svg').append(text);

const unterstuetzt = 'side' in SVGTextPathElement.prototype;
console.log(unterstuetzt ? tp.side.animVal : 'Fallback: Pfad umkehren');

2 (bzw. „Fallback: Pfad umkehren“ ohne Unterstützung)

// Wichtig · Fallstricke

Experimentell: Das Attribut side und die DOM-Eigenschaft stammen aus SVG 2 und werden bisher im Wesentlichen nur von Firefox unterstützt. Chromium und Safari ignorieren das Attribut, der Text bleibt dort links vom Pfad. Prüfe die Unterstützung mit 'side' in SVGTextPathElement.prototype.
Fallback: Für browserübergreifend gleiche Darstellung zeichnest du den Pfad in umgekehrter Richtung, statt dich auf side zu verlassen.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie tp.side = 2 hat keine Wirkung. Ändere den Wert über side.baseVal oder setAttribute().
baseVal liefert eine Zahl und keinen String. Vergleiche also mit 1/2 und nicht mit "left"/"right".
Bei side="right" ändert sich auch die Leserichtung. startOffset und text-anchor wirken dann visuell anders als erwartet.

Siehe auch

HTMLTextAreaElement.form SVGTextPathElement.href SVGTextPathElement.spacing SVGTextPathElement.method SVGTextPathElement.startOffset