<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 derwhite-space CSS-Eigenschaft gestylt werden.

Verwendungskontext

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

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 dastextLength-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 dieSVGTSpanElement-Schnittstelle.

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">    You are    <tspan>not</tspan>    a banana!  </text></svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # TextElement

Browser-Kompatibilität

Siehe auch

white-space

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換