|
Das tspan-Element entspricht im wesentlichen dem span-Element in HTML.
Mit dem tspan-Element lassen sich innerhalb des
text-Elements eigene Bereiche definieren, die Sie Ihren
Wünschen entsprechend positionieren und layouten können.
Auf diese Art ist es unter anderem möglich, mehrere Zeilen innerhalb eines
text-Elements darzustellen, ohne mehrere dieser Elemente
verwenden zu müssen.
Dies kann von Bedeutung sein, damit auf Texte mit mehreren Zeilen komplett selektiert
werden können, z.B. um Texte zu kopieren oder für externe Anwendungen, um Texte im
Zusammenhang auszulesen.
Natürlich lassen sich Textinhalte von tspan-Elementen auch unabhängig vom
Eltern-text-Element formatieren, so dass z.B. Schrift mit verschieden farbigen Zeichen möglich ist.
Für das tspan-Element sind alle Attribute gültig, die auch für das
text-Element verwendet werden dürfen.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das tspan-Element</title>
<desc>Text selektieren und lokal formatieren</desc>
<!-- und wieder etwas Grafik -->
<rect x="1" y="1" width="298" height="198"
style="fill:none; stroke:black" />
<circle cx="150" cy="100" r="90" style="fill:lightgreen;" />
<!-- ein Einzeiler -->
<text x="8" y="40"
style="font-family:verdana; font-size:20px; font-weight:bold;">
Text in SVG-Dokumenten
</text>
<!-- drei Zeilen innerhalb eines text-Elements,
mit Hilfe des tspan-Elements
verschoben und unterschiedlich formatiert -->
<text x="63" y="95"
style="font-family:verdana; font-size:16px;">
.. ist eine
<tspan x="97" y="115" style="font-weight:bold; fill:red;">
tolle Sache!
</tspan>
<tspan x="78" y="135">
Was meinen Sie ?!
</tspan>
</text>
</svg>
| 
