SVG <tspan>-Element

Das SVG <tspan>-Element wird verwendet, um Mehrzeilen-Text in SVG zu zeichnen. Es ist nicht notwendig, jede Zeile textuell exakt zu positionieren, das <tspan>-Element ermöglicht es, eine Zeile relativ zur vorherigen Zeile zu platzieren. Das <tspan>-Element ermöglicht es auch, mehrere Zeilen gleichzeitig auszuwählen und einzufügen, und nicht nur einen Text-Element.

tspan-Beispiel

Dies ist ein einfaches <tspan>Beispiel:

<svg	xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"	y="15">
　　　　　　　　<tspan>tspanZeilenumbruch　1</tspan>
　　　　　　　　<tspan>tspanZeilenumbruch　2</tspan>
　　　　</text>
</svg>

Dies ist das Ergebnisbild:

Beobachten Sie, wie das Ergebnis des <tspan>-Elements die Position der Textzeilen relativ zueinander (nachinander) beeinflusst.

Vertikale Position

Wenn Sie die Linie vertikal relativ positionieren möchten, können Sie das dy-Attribut (delta y) verwenden:

<svg	xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"	y="15">
　　　　　　　　<tspan>tspanZeilenumbruch　1</tspan>
　　　　　　　　<tspan	dy="10">tspanZeilenumbruch　2</tspan>
　　　　</text>
</svg>

Jetzt, da die dy-Eigenschaft des zweiten <tspan>-Elements auf " 10" , daher wird die zweite Textzeile unter der ersten Textzeile angezeigt10Pixel positioniert. Dies ist das Ergebnisbild:

Um das <tspan>-Element auf eine absolute y-Position y zu positionieren, verwenden Sie wie beim <text>-Element die Eigenschaft.

Wenn mehrere Zahlen im dy-Attribut geschrieben werden, wird jede Zahl auf die Zeichen im <tspan>-Element angewendet. Dies ist ein Beispiel:

<svg	xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text x="10" y="15">
　　　　　　　　　　　　<tspan	dy="5　10　20">
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</text>
　　　　</svg>

Dies ist das generierte Bild. Beachten Sie, wie sich der vertikale Abstand zwischen den Zeichensätzen ändert.

Horizontale Position

Um den Text relativ auf der x-Achse zu positionieren, können Sie das dx-Attribut (delta x) verwenden. Der folgende Beispiel zeigt die Einstellung von dx auf30 Effekt. Beachten Sie, dass die zweite Textzeile jetzt相对于 die Endposition der ersten Textzeile (nicht den Anfang) angezeigt wird30 Pixel:

<svg	xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20"	y="15">
　　　　　　　　<tspan>tspanZeilenumbruch　1</tspan>
　　　　　　　　<tspan	dx="30"	dy="10">tspanZeilenumbruch　2</tspan>
　　　　</text>
</svg>

Dies ist das Ergebnisbild:

Wenn mehrere Zahlen im dx-Attribut angegeben werden, wird jede Zahl auf jedes Zeichen im <tspan>-Element angewendet. Dies ist ein Beispiel:

<svg	xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text	x="10" y="20">
　　　　<tspan	dx="5　10　20">123</tspan>
</text></svg>

Dies ist das Ergebnisbild:

Sie können auch die x-Eigenschaft einstellen, um die x-Koordinate einer Textzeile zu fixieren. Wenn Sie eine Liste von nicht angepassten Zeilen nebeneinander darstellen möchten, ist dies sehr nützlich. Dies ist ein Beispiel, bei dem x in drei Zeilen auf10　Ein Beispiel hierfür:

<svg	xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text	y="20">
　　　　　　　　<tspan	x="10">tspanZeilenumbruch　1</tspan>
　　　　　　　　<tspan	x="10"	dy="15">tspanZeilenumbruch　2</tspan>
　　　　　　　　<tspan	x="10"	dy="15">tspanZeilenumbruch　3</tspan>
　　　　</text>
</svg>

Dies ist das Ergebnisbild:

Stil des <tspan>-Elements

können Sie die Stile von Elementen einzeln einstellen. Daher können Sie das <tspan>-Element verwenden, um den Stil von Textblöcken zu setzen, um ihn vom übrigen Text zu unterscheiden. Dies ist ein Beispiel:

<svg	xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text	x="10" y="20">
　　　　Hier ist ein 	<tspan	sstyle="schrift-Gewicht: 	fett;">fett</tspan	hwort.
</text></svg>

Dies ist das Ergebnisbild:

Verschiebung der Baseline für Superschriften und Unterschriften

Sie können die Baseline-Shift-CSS-Eigenschaften mit dem <tspan>-Element Superschriften und Unterschriften erstellen. Dies ist eine SVG-Baseline-Shift-Beispiel, das zeigt, wie:

<svg	wert="500"	höhe="100">　　　　
<text x="10" y="20">　　　　
Hier ist ein Text mit <tspan style="baselinen-shift: hochgestellt;">hochgestellt</tspan>　　　　
und <tspan style="baselinen-shift: tiefgestellt;">tiefgestellt</tspan> gemischt mit normal　　　　
text.　　　　
</text>　　　　
</svg>

Dies ist das generierte Bild. (Hinweis: Firefox könnte dies nicht unterstützen)