<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.

* Some parts of this feature may have varying levels of support.

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

html
<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

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# TextElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
tspan
dx
dy
fill
context-fill value
lengthAdjust
rotate
systemLanguage
textLength
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch