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

SVG Tutorial

  svg tutorial index  |  Kapitel 8   

8.4 Rotation einzelner Zeichen

Mit Hilfe des Attributs rotate können Zeichen vom Inhalt eines text-Elements rotiert werden.

Dabei ist zu beachten, dass lediglich das erste Zeichen rotiert wird, wenn dem Attribut rotate nur ein Wert zugeordnet wird. Es ist allerdings möglich rotate mehrere Werte zuzuordnen.
Jeder Wert bezieht sich dann auf genau ein Zeichen: der erste Wert auf das erste Zeichen, der zweite Wert auf das zweite Zeichen, ...

Der Drehpunkt eines Zeichens:
Denken Sie sich ein Rechteck um das jeweilige Zeichen, das das Zeichen eng umschliesst - der Drehpunkt des Zeichens ist dann die linke, untere Ecke dieses gedachten Rechtecks.

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="400" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das rotate-Attribut</title>
<desc>Rotation von Zeichen</desc>
  <defs>
    <style type="text/css"><![CDATA[
      text {font-family:Verdana,sans-serif;
            font-size:28px;}
    ]]></style>
  </defs>

  <!-- es wird immer nur das erste Zeichen gedreht -->
  <text x="20" y="40" rotate="40">
    rot
    <tspan rotate="40">ate</tspan>
  </text>
  <line x1="20" y1="40" x2="200" y2="40" stroke="black" />

  <!-- um den gesamten Text zu drehen muß transformiert werden -->
  <text x="20" y="70" fill="green" transform="rotate(40,20,70)">
    rotate
  </text>
  <text x="70" y="85" style="font-size:12px;" fill="gray">transform</text>
  <line x1="20" y1="70" x2="200" y2="70" stroke="black" />

  <!-- rotate mit mehreren Werten -->
  <text x="20" y="150" rotate="0,30,60,90,120,150,180,210,240,270,300,330,0">
    rotate-more-!
  </text>
  <line x1="20" y1="150" x2="200" y2="150" stroke="black" />

  <!-- Drehpunkt ist ist die linke, untere Ecke des rechteckigen Bereichs
       den das Zeichen einnimmt -->
  <text x="250" y="70">
    W
    <tspan x="250" y="70" rotate="90" fill="blue">W</tspan>
    <tspan x="250" y="70" rotate="180" fill="red">W</tspan>
  </text>
  <line x1="250" y1="70" x2="350" y2="70" stroke="black" />
</svg>
      



index  |  Kapitel 8  |  8.3  <<  | 8.4 |  >>  8.5   Schriftformatierung