SVGTextPathElement.href — Eigenschaft · JavaScript-Referenz

Signatur

SVGTextPathElement.href

Beschreibung

Die Eigenschaft href eines SVGTextPathElement verweist auf den Pfad, an dem der Text entlanggeführt wird, meist ein <path>-Element mit einer ID, etwa #kurve. Sie stammt aus dem Mixin SVGURIReference und gibt ein SVGAnimatedString-Objekt zurück, keinen einfachen String.

Über href.baseVal liest und setzt du den im Attribut hinterlegten Wert. href.animVal enthält den aktuellen Wert, auch während einer SMIL-Animation, und lässt sich nur lesen. Setzt du baseVal, ändert sich das zugehörige Attribut im DOM. So kannst du Text zur Laufzeit an einen anderen Pfad hängen.

Typische Einsatzfälle sind interaktive Diagramme, beschriftete Kurven, animierte Logos oder Editoren, in denen Text einem vom Nutzer gewählten Pfad folgen soll.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (lesen und schreiben, string) und animVal (nur lesen, string). Ist kein Attribut gesetzt, ist baseVal ein leerer String.

Beispiele

Referenzierten Pfad auslesen

// <svg><path id="kurve" d="M10,80 Q95,10 180,80" fill="none"/>
// <text><textPath id="tp" href="#kurve">Hallo Kurve</textPath></text></svg>
const textPath = document.getElementById('tp');
console.log(textPath.href.baseVal);
console.log(textPath.href.animVal);

#kurve #kurve

Text zur Laufzeit an einen anderen Pfad hängen

const textPath = document.querySelector('textPath');
const wechselPfad = (id) => {
  if (!document.getElementById(id)) {
    console.warn(`Pfad #${id} existiert nicht`);
    return;
  }
  textPath.href.baseVal = `#${id}`;
};

wechselPfad('welle');
console.log(textPath.getAttribute('href'));

#welle

textPath dynamisch erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const path = document.createElementNS(SVG_NS, 'path');
path.id = 'bogen';
path.setAttribute('d', 'M20,100 A80,80 0 0 1 180,100');
path.setAttribute('fill', 'none');

const text = document.createElementNS(SVG_NS, 'text');
const tp = document.createElementNS(SVG_NS, 'textPath');
tp.href.baseVal = '#bogen';
tp.textContent = 'Beschriftung am Bogen';

text.append(tp);
svg.append(path, text);
console.log(tp.href.baseVal);

#bogen

// Wichtig · Fallstricke

Kein String: textPath.href = '#x' hat keine Wirkung, denn die Eigenschaft ist schreibgeschützt. Setze stattdessen href.baseVal.
href oder xlink:href: Sind beide Attribute gesetzt, gewinnt href. xlink:href gilt als veraltet. Für sehr alte Browser, z. B. Safari vor Version 12, musst du es eventuell zusätzlich per setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', …) setzen.
Elemente per createElementNS erzeugen: Mit document.createElement('textPath') entsteht kein SVG-Element, und href bleibt dann undefined.
Verweist href auf eine ID, die es nicht gibt, wird der Text nicht dargestellt. Es erscheint keine Fehlermeldung.
SVG 2 erlaubt beim <textPath> zusätzlich das Attribut path. Die Browser unterstützen es bisher kaum.

Siehe auch

HTMLTableElement.tHead HTMLTextAreaElement.form SVGTextPathElement.side SVGTextPathElement.method SVGTextPathElement.spacing