Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Neben der Fähigkeit, Text auf einer Geraden Linie zu zeichnen, kann SVG diesen auch entlang der Form eines <path> Elements platzieren. Um von dieser Funktion Gebrauch zu machen, füge den gewünschten Text in einemtextPath Element mit einemxlink:href Attribut mit einer Referenz zu dem <path> Element.
Usage context
| Kategorien | Textinhaltselement, Textinhaltskindelement |
|---|---|
| Erlaubter Inhalt | Zeichendaten und eine beliebige Anzahl folgender Elemente in beliebiger Reihenfolge: Beschreibende Elemente <a>, <altGlyph>, <animate>, <animateColor>, <set>, <tref>, <tspan> |
Example
<svg width="100%" height="100%" viewBox="0 0 1000 300"
xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
<!-- Show outline of the viewport using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="black" stroke-width="2" />
</svg>
Live result:
Attributes
Global attributes
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
- Xlink attributes »
classstyleexternalResourcesRequired
Specific attributes
DOM Interface
This element implements the SVGTextPathElement interface.
Schlagwörter des Dokuments und Mitwirkende
Mitwirkende an dieser Seite:
Sebastianz,
modellking
Zuletzt aktualisiert von:
Sebastianz,