<tspan>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das <tspan>
SVG-Element definiert einen Untertext innerhalb eines <text>
-Elements oder eines anderen <tspan>
-Elements. Es ermöglicht die Anpassung des Stils und/oder der Position dieses Untertextes nach Bedarf.
Hinweis: Das <tspan>
-Element bricht standardmäßig nicht um. Um dies zu erreichen, muss es mit der white-space
CSS-Eigenschaft gestylt werden.
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>
Attribute
x
-
Die x-Koordinate des Startpunkts der Textbasislinie oder die x-Koordinate jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben ist. 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 ist. 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 ist. 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 ist. Wertetyp: Liste von (<length>|<percentage>); Standardwert: none; Animierbar: ja
rotate
-
Dreht die Ausrichtung jedes einzelnen Glyphs. Kann Glyphen einzeln drehen. Wertetyp: <list-of-number>; Standardwert: none; Animierbar: ja
lengthAdjust
-
Wie der Text gestreckt oder komprimiert wird, um in die durch das
textLength
-Attribut definierte Breite zu passen. Wertetyp:spacing
|spacingAndGlyphs
; Standardwert:spacing
; Animierbar: ja textLength
-
Eine Breite, auf die der Text skaliert werden soll. Wertetyp: <length>|<percentage>; Standardwert: none; Animierbar: ja
Verwendungskontext
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextElement |
Browser-Kompatibilität
BCD tables only load in the browser