|
Um ein Objekt bzw. das temporäre Koordinatensystem des Objekts zu verzerren,
stehen zwei Möglichkeiten zur Verfügung:
die Anweisung skewX - eine Verzerrung entlang der x-Achse und
die Anweisung skewY - eine Verzerrung entlang der y-Achse.
Sie können ein Objekt also verzerren, wenn Sie dem Attribut
transform als Wert die Anweisung
skewX und/oder die Anweisung
skewY mit der Angabe eines Winkels zuweisen.
Dabei gibt der Winkel an, um wieviel Grad sich die jeweils "andere" Achse,
auf der in der Eigenschaft genannten Achse, hin- oder wegdreht.
Bei einer positiven Wikelangabe dreht sich die jeweils "andere" Achse zur
genannten Achse hin: es entsteht eine Stauchung.
Bei einer negativen Winkelangabe dreht sich die jeweils "andere" Achse von
der genannten Achse weg: es entsteht eine Streckung.
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>skewX und skewY - Verzerren</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(50,50)" />
<use xlink:href="#ks"
transform="translate(50,50) skewX(25)" />
<use xlink:href="#ks" transform="translate(200,50)" />
<use xlink:href="#ks" transform="translate(200,50)
skewY(25)" />
<use xlink:href="#ks" transform="translate(50,200)" />
<use xlink:href="#ks"
transform="translate(50,200) skewY(25) skewX(25)" />
<use xlink:href="#ks" transform="translate(200,200)" />
<use xlink:href="#ks"
transform="translate(200,200) skewY(-25) skewX(-25)" />
<text x="55" y="140">skewX(25)</text>
<text x="205" y="140">skewY(25)</text>
<text x="55" y="290">skewX(25) skewY(25)</text>
<text x="205" y="290">skewX(-25) skewY(-25)</text>
</svg>
</svg>
Im obigen Beispiel wird unser Symbol "ks" zuerst um 25 Grad zur X-Achse
gestaucht, d.h. die y-Achse dreht sich um 25 Grad auf die X-Achse zu:
skewX(25),
dann wird es um 25 Grad zu Y-Achse gestaucht, die x-Achse dreht sich also um 25 Grad
auf die Y-Achse zu:
skewY(25).
Die unteren beiden Verzerrungen zeigen eine Stauchung und eine Streckung des Objekts
entlang beider Achsen.
Die Reihenfolge der Verwendung von
skewX und skewY ist - für
Transformationsanweisungen ungewöhnlich - nicht von Bedeutung.
Wenn Sie allerdings andere, weitere Transformationen auf ein Objekt anwenden möchten,
sollten sie darauf achten, dass sich der Verlauf der Achsen
geändert hat.
| 
