|
Einem text-Element werden die Attribute
x und y zur Festlegung der
Position des Textes innerhalb der Grafik zugeordnet.
Dabei ist unbedingt zu beachten, dass die y-Koordinate bei text-Elementen die
Position der Grundlinie des Textes angibt. Die x,y-Koordinate bestimmt also die linke
untere Ecke – und nicht wie bei allen anderen Elementen in SVG die linke obere Ecke.
Weisen Sie y daher immer eine Wert größer 0 zu, sonst liegt
der Text möglicherweise außerhalb der Grafik und wird nicht dargestellt.
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 text-Element</title>
<desc>Text in SVG platzieren</desc>
<!-- 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, mit style-Vorschriften formatiert -->
<text x="8" y="40"
style="font-family:verdana; font-size:20px; font-weight:bold;">
Text in SVG-Dokumenten
</text>
<!-- ein Einzeiler, mit Attributen formatiert -->
<text x="61" y="105"
font-family="verdana" font-size="16px">
.. ist eine tolle Sache!
</text>
</svg>
Es ist möglich für die Attribute x und
y mehrere, durch Komma getrennte, Werte festzulegen.
Dann bezieht sich jeder Wert auf das seiner Position entspechende einzelne Zeichen
innerhalb des text-Elements. Also: erster Wert für das erste
Zeichen, zweiter Wert für das zweite Zeichen, .. .
Die Attribute dx und dy,
bewirken Verschiebungen der einzelene Zeichen entlang der x- bzw. y-Achse.
Die Verschiebung bezieht sich auf die direkt vorangegangenen Festlegung der
x,y-Koordinate.
Auch hier sind mehrere, durch Komma getrennte Werte möglich.
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>nochmal das text-Element</title>
<desc>Text in SVG platzieren</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:verdana,sans-serif; font-size:40px; font-weight:bold;}
]]>
</style>
</defs>
<!-- wieder etwas Grafik -->
<circle cx="150" cy="100" r="90" style="fill:none; stroke:black;" />
<!-- mehrere Werte für x und y -->
<text class="big" x="110,135,160" y="70,110,150">
SVG
</text>
<!-- Verwendung von dx und dy -->
<text class="big" x="110,135,160" y="70,110,150"
dx="-10,-10,-10" style="fill:red;">
SVG
</text>
</svg>
| 
