<textPath>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <textPath> SVG Element wird verwendet, um Text entlang der Form eines <path> Elements darzustellen. Der Text muss im <textPath> Element eingeschlossen sein und sein href Attribut wird verwendet, um den gewünschten <path> zu referenzieren.

Beispiel

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

Attribute

href: Die URL zum Pfad oder zur Grundform, auf der der Text dargestellt werden soll. Wenn das path Attribut gesetzt ist, hat href keine Wirkung. Wertetyp: <URL> ; Standardwert: keiner; Animierbar: ja
lengthAdjust: Wo der Längenausgleich auf den Text angewendet werden soll: der Abstand zwischen Glyphen oder sowohl der Abstand als auch die Glyphen selbst. Wertetyp: spacing|spacingAndGlyphs; Standardwert: spacing; Animierbar: ja
method: Welche Methode verwendet werden soll, um individuelle Glyphen entlang des Pfades darzustellen. Wertetyp: align|stretch ; Standardwert: align; Animierbar: ja
path Experimentell: Der Pfad, auf dem der Text dargestellt werden soll. Wertetyp: <path_data> ; Standardwert: keiner; Animierbar: ja
side Experimentell: Auf welcher Seite des Pfades der Text dargestellt werden soll. Wertetyp: left|right ; Standardwert: left; Animierbar: ja
spacing: Wie der Abstand zwischen den Glyphen gehandhabt werden soll. Wertetyp: auto|exact ; Standardwert: exact; Animierbar: ja
startOffset: Wie weit der Anfang des Textes vom Anfang des Pfades versetzt werden soll. Wertetyp: <length>|<percentage>|<number> ; Standardwert: 0; Animierbar: ja
textLength: Die Breite des Raums, in den der Text dargestellt wird. Wertetyp: <length>|<percentage>|<number> ; Standardwert: auto; Animierbar: ja

Verwendungskontext

Kategorien	Element mit Textinhalt, Untergeordnetes Element mit Textinhalt
Erlaubter Inhalt	Zeichendaten und beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Beschreibende Elemente `<a>`, `<animate>`, `<set>`, `<tref>`, `<tspan>`

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElement

Browser-Kompatibilität

BCD tables only load in the browser