<tspan>
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 <tspan> SVG-Element definiert einen Teiltext innerhalb eines <text>-Elements oder eines anderen <tspan>-Elements. Es ermöglicht die Anpassung des Stils und/oder der Position dieses Teiltexts nach Bedarf.
Hinweis:
Das <tspan>-Element umbricht standardmäßig nicht; um dies zu erreichen, muss es mit der white-space CSS-Eigenschaft gestylt werden.
Verwendungskontext
Attribute
x-
Die x-Koordinate des Startpunkts der Textbasislinie oder die x-Koordinate jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Wertetyp: Liste von (<length> | <percentage>); Standardwert:
0; Animierbar: ja y-
Die y-Koordinate des Startpunkts der Textbasislinie oder die y-Koordinate jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Wertetyp: Liste von (<length> | <percentage>); Standardwert:
0; Animierbar: ja dx-
Verschiebt die Textposition horizontal von einem vorherigen Textelement oder verschiebt die Position jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Wertetyp: Liste von (<length> | <percentage>); Standardwert: none; Animierbar: ja
dy-
Verschiebt die Textposition vertikal von einem vorherigen Textelement oder verschiebt die Position jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Wertetyp: Liste von (<length> | <percentage>); Standardwert: none; Animierbar: ja
rotate-
Dreht die Ausrichtung jedes einzelnen Glyphs. Kann Glyphen individuell drehen. Wertetyp: <list-of-number>; Standardwert: none; Animierbar: ja
lengthAdjust-
Wie der Text gedehnt oder komprimiert wird, um in die Breite zu passen, die durch das
textLength-Attribut definiert ist. Wertetyp:spacing|spacingAndGlyphs; Standardwert:spacing; Animierbar: ja textLength-
Eine Breite, an die der Text angepasst werden soll. Wertetyp: <length> | <percentage>; Standardwert: none; Animierbar: ja
DOM-Schnittstelle
Dieses Element implementiert die SVGTSpanElement-Schnittstelle.
Beispiel
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
<style>
text {
font: italic 12px serif;
}
tspan {
font: bold 10px sans-serif;
fill: red;
}
</style>
<text x="10" y="30" class="small">
You are
<tspan>not</tspan>
a banana!
</text>
</svg>
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElement |