<textPath>

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

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

Verwendungskontext

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

Attribute

href: Die URL zu dem Pfad oder der Grundform, auf dem der Text gerendert werden soll. Wenn das path Attribut gesetzt ist, hat href keine Wirkung. Werttyp: <URL>; Standardwert: keiner; Animierbar: ja
lengthAdjust: Wo die Längenanpassung beim Text angewendet werden soll: der Raum zwischen den Glyphen oder sowohl der Raum als auch die Glyphen selbst. Werttyp: spacing | spacingAndGlyphs; Standardwert: spacing; Animierbar: ja
method: Die Methode, um einzelne Glyphen entlang des Pfades zu rendern. Werttyp: align | stretch; Standardwert: align; Animierbar: ja
path Experimentell: Der Pfad, auf dem der Text gerendert werden soll. Werttyp: <path_data>; Standardwert: keiner; Animierbar: ja
side Experimentell: Welche Seite des Pfades der Text gerendert werden soll. Werttyp: left | right; Standardwert: left; Animierbar: ja
spacing: Wie der Raum zwischen den Glyphen gehandhabt werden soll. Werttyp: auto | exact; Standardwert: exact; Animierbar: ja
startOffset: Wie weit der Anfang des Textes vom Anfang des Pfades versetzt werden soll. Werttyp: <length> | <percentage> | <number>; Standardwert: 0; Animierbar: ja
textLength: Die Breite des Raumes, in den der Text gerendert wird. Werttyp: <length> | <percentage> | <number>; Standardwert: auto; Animierbar: ja

DOM-Schnittstelle

Dieses Element implementiert die SVGTextPathElement Schnittstelle.

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>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElement