<textPath>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 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 dashref 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>`,`<set>`,`<tspan>`

Attribute

href: Die URL zu dem Pfad oder der Grundform, auf dem der Text gerendert werden soll. Wenn daspath Attribut gesetzt ist, hathref 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
pathExperimentell: Der Pfad, auf dem der Text gerendert werden soll.Werttyp:<path_data>;Standardwert: keiner;Animierbar:ja
sideExperimentell: 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 dieSVGTextPathElement 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       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

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

Movatterモバイル変換