SVG/Element/tspan

Aus SELFHTML-Wiki
< SVG‎ | Element
Wechseln zu: Navigation, Suche

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
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

Weblinks