|
In SVG können Elemente oder Objekte (Gruppierungen oder Symbole) transformiert werden.
Mit Hilfe des transform-Attributs sind folgende Transformationen möglich:
- Verschieben
- Skalieren
- Rotieren
- Verzerren oder Neigen
Die verschieden Transformationen werden durch unterschiedliche Wertzuweisungen für das
Attribut transform realisiert. Dabei ist es auch möglich mehrere Transformantionsanweisungen
hintereinander anzugeben.
Bei einer Transformation ist folgendes zu beachten:
- Vom user agent wird zuerst ein temporäres Koordinatensystem erzeugt, welches mit dem orginären Koordinatensystem identisch ist, dessen einziger Inhalt jedoch das zu transformierende Objekt ist.
- Dann wird die Transformationsanweisung auf dieses temporäre Koordinatensystem angewandt, d.h. das gesamte temporäre Koordinatensystem wird verändert.
- Somit wird das Objekt ebenfalls transformiert.
Wenn Sie also mehrere Transformationen auf ein Objekt anwenden, ist die Reihenfolge der
Veränderungen von enormer Bedeutung.
Im folgenden Beispiel wird ein SVG-Objekt, das Symbol "ks" verwendet,
welches aus der Gruppierung "smilie1"
und einem kleinen, roten Koordinatensystem, der Gruppierung "koord", besteht.
Das rote Koordinatensystem repräsentiert
das temporäre Koordinatensystem, in welchem sich das gesamte Objekt befindet.
Dieses temporäres Koordinatensystem
wird nun zuerst verschoben und dann rotiert,
und danach zuerst rotiert und dann verschoben dargestellt um die
die Wirkungsweise von Transformationsanweisungen zu verdeutlichen.
Beispiel Quellcode
Grafische Darstellung:
SVG (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>Anwendung und Besonderheiten von Transformationen</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" />
<line x1="20" y1="0" x2="400" y2="315"
stroke="blue" />
<use xlink:href="#ks" transform="translate(250)" />
<use xlink:href="#ks" transform="translate(250) rotate(40)" />
<use xlink:href="#ks" transform="rotate(40)" />
<use xlink:href="#ks" transform="rotate(40) translate(250)" />
<text x="200" y="115">erst verschoben dann rotiert
<tspan x="200" y="130">translate(250) rotate(40)</tspan>
</text>
<text x="5" y="155">erst rotiert dann verschoben
<tspan x="5" y="170">rotate(40) translate(250)</tspan>
</text>
</svg>
</svg>
| 
