|
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>
|
