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 von älteren Versionen des IE nicht unterstützt.

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

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 …
    <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.
Beachten Sie: Positionsangaben mit …
  • dx und dy sind relativ und beziehen sich auf das Elternelement text
  • x und y 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]