<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.

Um Text entlang der Form eines <path> zu rendern, umschließen Sie den Text in einem <textPath>-Element, das ein href-Attribut mit einem Verweis auf das <path>-Element hat.

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 zu dem Pfad oder der Grundform, auf der der Text gerendert werden soll. Wenn das path-Attribut gesetzt ist, hat href keine Wirkung. Wertetyp: <URL> ; Standardwert: keiner; Animierbar: ja
lengthAdjust: Wo die Längenanpassung am Text vorgenommen werden soll: der Abstand zwischen den Glyphen oder sowohl der Abstand als auch die Glyphen selbst. Wertetyp: spacing|spacingAndGlyphs; Standardwert: spacing; Animierbar: ja
method: Welche Methode verwendet werden soll, um einzelne Glyphen entlang des Pfades zu rendern. Wertetyp: align|stretch ; Standardwert: align; Animierbar: ja
path Experimentell: Der Pfad, auf dem der Text gerendert werden soll. Wertetyp: <path_data> ; Standardwert: keiner; Animierbar: ja
side Experimentell: Welche Seite des Pfades der Text gerendert 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 sein soll. Wertetyp: <length>|<percentage>|<number> ; Standardwert: 0; Animierbar: ja
textLength: Die Breite des Raums, in den der Text gerendert werden soll. Wertetyp: <length>|<percentage>|<number> ; Standardwert: auto; Animierbar: ja

Nutzungskontext

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