|
Sie können ein Objekt rotieren, wenn Sie dem Attribut
transform als Wert die Anweiung
rotate mit der Angabe des Winkels zuweisen.
Zusätzlich zu Angabe des Winkels können Sie die x,y-Koordinate des Drehpunktes
angeben. Alle Werte werden durch Kommata getrennt angegeben.
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="400"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das transform-Attribut</title>
<desc>rotate - rotieren</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:12px;}
]]>
</style>
<symbol id="ks">
<g id="smilie1">
<desc>ein lachendes Smilie</desc>
<circle id="gesicht" cx="20" cy="20" r="15"
fill="yellow" stroke="black" />
<circle id="auge-links" cx="15" cy="15" r="2"
fill="black" stroke="black" />
<circle id="auge-rechts" cx="25" cy="15" r="2"
fill="black" stroke="black" />
<line id="nase" x1="20" y1="18" x2="20" y2="23"
stroke="black" stroke-width="2" />
<path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
stroke="black" fill="none" stroke-width="2" />
</g>
<g id="koord">
<line x1="0" y1="0" x2="100" y2="0"
stroke="red" />
<line x1="0" y1="0" x2="0" y2="100"
stroke="red" />
<rect x="0" y="0" width="3" height="3"
fill="red" />
<rect x="0" y="97" width="3" height="3"
fill="red" />
<rect x="97" y="0" width="3" height="3"
fill="red" />
</g>
</symbol>
</defs>
<svg x="10" y="10" width="380" height="380">
<rect x="0" y="0" width="380" height="380" fill="none" stroke="blue" />
<use xlink:href="#ks" transform="translate(100,150)" />
<use xlink:href="#ks" transform="translate(100,150) rotate(30)" />
<use xlink:href="#ks" transform="translate(100,150) rotate(-130)" />
<use xlink:href="#ks" transform="translate(250,150)" />
<use xlink:href="#ks" transform="translate(250,150) rotate(30,20,20)" />
<text x="105" y="230">orginal</text>
<text x="105" y="230" transform="rotate(30,105,230) translate(-40,15)">
rotate(30)
</text>
<text x="105" y="230" transform="rotate(-130,105,230) translate(70,120)">
rotate(-130)
</text>
<text x="255" y="230" transform="rotate(30,255,230) translate(-30)">
rotate(30,20,20)
</text>
</svg>
</svg>
Im obigen Beispiel wird das Objekt "ks" zuerst durch zwei
Transformationsanweisungen in zwei Richtungen gedreht:
rotate(30) - positive Winkel drehen das Objekt im Uhrzeigersinn,
rotate(-130) - negatige Winkel drehen das Objekt gegen den Uhrzeigersinn.
Da der Drehpunkt bei beiden Rotationsanweisungen nicht angegeben ist, wird der
Nullpunkt des temporären Koordinatensystems als Drehpunkt verwendet.
Bei der dritten Rotationsanweisung wird zusätzlich die x,y-Koordinate des
Objektmittelpunkts als Drehpunkt angegeben:
rotate(30,20,20) - Drehpunkt ist die Koordinate 20,20.
Beachten Sie, dass sich die Koordinate des Objektmittelpunkts nicht verändert hat,
obwohl das Objekt vor der Rotationsanweisung verschoben wurde: Es wurde ja das gesamte
temporäre Koordinatensystem verschoben.
.. und auch bei Rotationsanweisungen ist darauf zu achten, dass das gesamte temporäre
Koordinatensystem gedreht wird. Nachfolgende Transformationsanweisungen werden also
auf eine gedrehte (!) x- und y-Achse angewandt.
|
