SVG/Element/tspan

Das tspan-Element definiert eigene Text-Bereiche, die Sie entsprechend positionieren und layouten können. Das tspan-Element entspricht im Wesentlichen dem span-Element in HTML und kann beliebig innerhalb des text-Elements verwendet werden.

Gegenüber dem Einsatz mehrerer text-Elemente bietet tspan folgende Vorteile:

• tspan-Elemente müssen nicht (können aber) neu positioniert werden.
• die einzelnen tspan-Elemente gehören zusammen und können gemeinsam markiert werden

Syntax

Start-Tag: notwendig

End-Tag: notwendig

Elternelemente

Darf vorkommen in:
SVG/Element/text

erlaubte Inhalte

* a

• tspan
• animate, set

Attribute

Name	Inhalt	Standardwert	Bedeutung
dx	NUMBER	0px	Verschiebung der X-Position
dy	NUMBER	0px	Verschiebung der Y-Position
lengthAdjust	spacing spacingAndGlyphs		legt fest, inwieweit die Werte auf textLength angepasst werden.
rotate	NUMBER		Winkelmaß der Rotation
textLength	NUMBER		Länge des Texts
transform	CDATA
x	NUMBER	0px	X-Position
y	NUMBEr	0px	Y-Position

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

    <text x="40" y="40">
      <tspan id="eins">S</tspan>
      <tspan id="zwei">V</tspan>
      <tspan id="drei">G</tspan>
      <tspan dx="10" dy="80">in einer neuen Zeile ... (relativ positioniert)</tspan>
      <tspan x="10" y="175">und in noch einer ... (absolut positioniert)</tspan>
  </text>

Ohne Angabe einer x-Koordinate wird der tspan in Laufrichtung anschließend positioniert, dies kann durch die Angabe von dx und dy, sowie in der letzten Zeile durch die Angabe eines Werts für x und y geändert werden.

Siehe auch

• SVG/Tutorials/Text
• SVG/Tutorials/Text/mehrzeiliger Text

Weblinks

• W3C: TSpanElement