Signatur
Beschreibung
Die schreibgeschützte Eigenschaft method der Schnittstelle SVGTextPathElement spiegelt das SVG-Attribut method eines <textPath>-Elements wider. Das Attribut legt fest, wie die einzelnen Zeichen entlang des Pfads gesetzt werden: bei align (Standard) wird jedes Glyph unverändert gedreht und am Pfad ausgerichtet, bei stretch sollen die Glyphen verzerrt werden, damit sie der Krümmung des Pfads folgen.
Zurückgegeben wird kein String, sondern ein SVGAnimatedEnumeration-Objekt. Dessen Eigenschaft baseVal enthält den im Markup gesetzten Wert als Zahl, animVal den aktuellen Wert, gegebenenfalls unter Berücksichtigung einer laufenden SMIL-Animation. Die Zahlen entsprechen den Konstanten SVGTextPathElement.TEXTPATH_METHODTYPE_UNKNOWN (0), TEXTPATH_METHODTYPE_ALIGN (1) und TEXTPATH_METHODTYPE_STRETCH (2).
Die Eigenschaft selbst ist schreibgeschützt, baseVal kann aber gesetzt werden. Das ändert das zugrunde liegende Attribut. Alternativ funktioniert auch setAttribute("method", "stretch"). Praktisch nützlich ist method vor allem, wenn man den Zustand eines vorhandenen <textPath> auslesen oder umschalten will, ohne mit Attribut-Strings zu arbeiten.
Rückgabewert
baseVal (Zahl, beschreibbar) und animVal (Zahl, schreibgeschützt). Mögliche Werte: 0 = unbekannt, 1 = align, 2 = stretch. Fehlt das Attribut, ist der Wert 1 (align).Beispiele
Aktuelle Methode auslesen
// HTML: <svg><path id="kurve" d="M10,90 Q100,10 190,90" fill="none"/>
// <text><textPath id="tp" href="#kurve" method="stretch">Hallo Welt</textPath></text></svg>
const textPath = document.getElementById('tp');
const namen = {
[SVGTextPathElement.TEXTPATH_METHODTYPE_UNKNOWN]: 'unknown',
[SVGTextPathElement.TEXTPATH_METHODTYPE_ALIGN]: 'align',
[SVGTextPathElement.TEXTPATH_METHODTYPE_STRETCH]: 'stretch'
};
console.log(textPath.method.baseVal);
console.log(namen[textPath.method.baseVal]);Methode per Skript umschalten
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const path = document.createElementNS(svgNS, 'path');
path.id = 'bogen';
path.setAttribute('d', 'M10,80 C40,10 160,10 190,80');
path.setAttribute('fill', 'none');
const text = document.createElementNS(svgNS, 'text');
const tp = document.createElementNS(svgNS, 'textPath');
tp.setAttribute('href', '#bogen');
tp.textContent = 'Text auf dem Bogen';
text.append(tp);
svg.append(path, text);
document.body.append(svg);
console.log(tp.method.baseVal); // Standard: align
// Über die Konstante umschalten – das Attribut wird mitgesetzt
tp.method.baseVal = SVGTextPathElement.TEXTPATH_METHODTYPE_STRETCH;
console.log(tp.getAttribute('method'));Alle textPath-Elemente auf align zurücksetzen
const resetAlign = (root = document) => {
root.querySelectorAll('textPath').forEach((tp) => {
if (tp.method.baseVal !== SVGTextPathElement.TEXTPATH_METHODTYPE_ALIGN) {
tp.method.baseVal = SVGTextPathElement.TEXTPATH_METHODTYPE_ALIGN;
}
});
};
resetAlign();
console.log([...document.querySelectorAll('textPath')].map((tp) => tp.getAttribute('method')));// Wichtig · Fallstricke
- Kein String:
tp.methodist ein Objekt. Vergleiche wietp.method === 'stretch'sind immerfalse. Nutzetp.method.baseValzusammen mit den Konstanten. - Schreibgeschützt: Eine Zuweisung an
tp.methodselbst wird ignoriert (im Strict Mode gibt es einenTypeError). Schreib stattdessen inbaseVal. - Ungültige Werte: Wenn du
baseValauf0(UNKNOWN) oder eine unbekannte Zahl setzt, werfen aktuelle Browser einenTypeError. Ungültige Attributwerte im Markup führen dagegen zum Wert0bzw. zum Standardverhalten. - Darstellung: Die Eigenschaft ist in allen modernen Browsern vorhanden. Die tatsächliche Verzerrung der Glyphen bei
stretchsetzen die gängigen Rendering-Engines aber kaum oder gar nicht um. Oft sieht das Ergebnis genauso aus wie beialign. Verlass dich für wichtige Darstellungen also nicht darauf. animValweicht nur während einer SMIL-Animation (<set>/<animate>) vonbaseValab.