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

SVG Tutorial

  svg tutorial index  |  Kapitel 8   

8.1 Das text-Element und seine Koordinaten

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>
      



index  |  Kapitel 8  <<  | 8.1 |  >>  8.2   Text im Text - das tspan-Element