Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 8   

8.2 Text im Text - das tspan-Element

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>
      



index  |  Kapitel 8  |  8.1  <<  | 8.2 |  >>  8.3   Texte referenzieren - das tref-Element