<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 darzustellen. Der Text muss im <textPath>-Element eingeschlossen sein und das href-Attribut wird verwendet, um auf den gewünschten <path> zu verweisen.

Beispiel

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 gerendert werden soll. Wenn das path-Attribut gesetzt ist, hat href keine Wirkung. Wertetyp: <URL>; Standardwert: keiner; Animierbar: ja

lengthAdjust

Wo die Längenanpassung auf den Text angewendet 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 Pfads darzustellen. Wertetyp: align | stretch; Standardwert: align; Animierbar: ja

path

Der Pfad, auf dem der Text gerendert werden soll. Wertetyp: <path_data>; Standardwert: keiner; Animierbar: ja

side

Welche Seite des Pfads 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 Pfads versetzt sein soll. Wertetyp: <length> | <percentage> | <number>; Standardwert: 0; Animierbar: ja

textLength

Die Breite des Raumes, in den der Text gerendert wird. Wertetyp: <length> | <percentage> | <number>; Standardwert: auto; Animierbar: ja

Nutzungskontext

KategorienElement mit Textinhalt, Untergeordnetes Element mit Textinhalt
Erlaubter InhaltZeichendaten und beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Beschreibende Elemente
<a>, <animate>, <discard>, <set>, <tspan>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# TextPathElement

Browser-Kompatibilität