|
Sie können ein Objekt verschieben, wenn Sie dem Attribut transform als Wert
die Anweisung
translate mit Längenangaben zur Verschiebung entlang der Achse(n) zuweisen.
Die Längenangabe(n) werden in runden Klammern direkt nach der Anweisung
translate gesetzt.
Es sind maximal 2 Angaben (Verschiebung der x- und der y-Achse),
durch Komma getrennt, möglich.
Wenn Sie nur eine Längenangabe verwenden, wird diese als Verschiebungslänge entlang der
x-Achse interpretiert.
Beachten Sie, dass bei Transformationen immer das gesamte temporäre Koordinatensystem
transformiert wird.
Der Verlauf und die Skalierung (Größe) der x- und/oder y-Achse kann also,
je nach vorangegangener Transformationsanweisung, auch vom "normalen" Verlauf
abweichen.
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>translate - Verschieben</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" />
<use xlink:href="#ks" transform="translate(150)" />
<use xlink:href="#ks" transform="translate(0,150)" />
<use xlink:href="#ks" transform="translate(150,150)" />
<text x="10" y="70">keine Verschiebung</text>
<text x="160" y="70">150 px nur x-Achse
<tspan x="160" y="85">translate(150)</tspan>
</text>
<text x="10" y="220">150 px nur y-Achse
<tspan x="10" y="235">translate(0,150)</tspan>
</text>
<text x="160" y="220">150 px in beide Richtungen
<tspan x="160" y="235">translate(150,150)</tspan>
</text>
</svg>
</svg>
Im obigen Beispiel wird - das bereits bekannte - Symbol "ks" verschoben:
zuerst nur entlang der x-Achse: translate(150),
dann nur entlang der y-Achse: translate(0,150)
und zuletzt in beide Richtungen: translate(150,150).
| 
