<textPath>

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das <textPath>-Element von SVG wird verwendet, um Text entlang der Form eines <path>-Elements darzustellen. Der Text muss vom <textPath>-Element umschlossen sein. Dessen href-Attribut verweist auf den gewünschten <path>.

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>`, `<tspan>`

Attribute

href: Die URL zum Pfad oder zur Grundform, entlang derer der Text dargestellt werden soll. Wenn das path-Attribut gesetzt ist, hat href keine Wirkung. Wertetyp: <URL>; Standardwert: keiner; Animierbar: ja
lengthAdjust: Legt fest, worauf die Längenanpassung des Textes angewendet wird: auf den Abstand zwischen den Glyphen oder sowohl auf den Abstand als auch auf die Glyphen selbst. Wertetyp: spacing | spacingAndGlyphs; Standardwert: spacing; Animierbar: ja
method: Legt fest, mit welcher Methode einzelne Glyphen entlang des Pfads dargestellt werden. Wertetyp: align | stretch; Standardwert: align; Animierbar: ja
path: Der Pfad, entlang dessen der Text dargestellt werden soll. Wertetyp: <path_data>; Standardwert: keiner; Animierbar: ja
side: Legt fest, auf welcher Seite des Pfads der Text dargestellt werden soll. Wertetyp: left | right; Standardwert: left; Animierbar: ja
spacing: Legt fest, wie der Abstand zwischen Glyphen gehandhabt wird. Wertetyp: auto | exact; Standardwert: exact; Animierbar: ja
startOffset: Legt fest, wie weit der Textanfang vom Anfang des Pfads versetzt sein soll. Wertetyp: <length> | <percentage> | <number>; Standardwert: 0; Animierbar: ja
textLength: Die Breite des Bereichs, in dem der Text dargestellt wird. Wertetyp: <length> | <percentage> | <number>; Standardwert: auto; Animierbar: ja

DOM-Schnittstelle

Dieses Element implementiert die Schnittstelle SVGTextPathElement.

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

Spezifikation
Scalable Vector Graphics (SVG) 2 # TextPathElement

Browser-Kompatibilität

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden