SVG/Elemente/Text/tspan

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

Leider ist es in SVG (noch) nicht möglich mehrzeiligen Text festzulegen. Mehrere selbstständige text-Elemente haben den Nachteil, dass sie nicht zusammen markiert und selektiert werden können. Mit dem foreignObject-Element können Sie inline-XHTML in SVG einbinden, [1] dies wird aber auch von aktuellen Versionen des IE nicht unterstützt.

  • SVG 1.1
  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera

Allerdings lassen sich mit dem tspan-Element eigene Bereiche definieren[2], 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
Beispiel ansehen …
<svg>
  <text x="40" y="40">
    <tspan id="eins">S</tspan>
    <tspan id="zwei">V</tspan>
    <tspan id="drei">G</tspan>
    <tspan y="80">in einer neuen Zeile ...</tspan>
    <tspan x="10" y="175">und in noch einer ...</tspan>
  </text>
</svg>
Ohne Angabe einer x-Koordinate wird der tspan in Laufrichtung anschließend positioniert, dies kann wie in der letzten Zeile durch die Angabe eines Werts für x geändert werden.
Beachten Sie: Die Angaben für die x- und x- Koordinaten beziehen sich nicht auf das Elternelement text, sondern auf die viewbox des SVG-Elements.


Quellen[Bearbeiten]

  1. http://www.w3.org/TR/2012/WD-SVG2-20120828/extend.html#ForeignObjectElement
  2. http://www.w3.org/TR/SVG/text.html#TSpanElement

Referenz[Bearbeiten]