<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 umbricht standardmäßig nicht. Um dies zu erreichen, muss es mit der CSS-Eigenschaft white-space gestylt werden.

Beispiel

html,
body,
svg {
  height: 100%;
}

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 Text-Basislinie oder die x-Koordinate jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Werttyp: Liste von (<length>|<percentage>) ; Standardwert: 0; Animierbar: ja
y: Die y-Koordinate des Startpunkts der Text-Basislinie oder die y-Koordinate jedes einzelnen Glyphs, wenn eine Liste von Werten angegeben wird. Werttyp: 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. Werttyp: Liste von (<length>|<percentage>) ; Standardwert: keiner; 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. Werttyp: Liste von (<length>|<percentage>) ; Standardwert: keiner; Animierbar: ja
rotate: Dreht die Ausrichtung jedes einzelnen Glyphs. Kann Glyphen individuell drehen. Werttyp: <list-of-number> ; Standardwert: keiner; Animierbar: ja
lengthAdjust: Wie der Text gedehnt oder komprimiert wird, um die durch das textLength-Attribut definierte Breite zu passen. Werttyp: spacing|spacingAndGlyphs; Standardwert: spacing; Animierbar: ja
textLength: Eine Breite, auf die der Text skaliert werden sollte, um sie zu passen. Werttyp: <length>|<percentage> ; Standardwert: keiner; Animierbar: ja

Verwendungszusammenhang

Kategorien	Element mit Textinhalt, Untergeordnetes Element mit Textinhalt
Erlaubter Inhalt	Zeichendaten und beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Beschreibende Elemente `<a>`, `<animate>`, `<discard>`, `<set>`, `<tref>`, `<tspan>`

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextElement

Browser-Kompatibilität

Siehe auch

white-space