|
Sie können ein Objekt skalieren (in seiner Größe verändern), wenn Sie dem Attribut
transform als Wert die Anweisung
scale mit der Angabe des Skalierungsfakors zuweisen.
Wenn Sie, wie im obigen Beispiel nur einen Skalierungsfaktor angeben, so wird dieser
für beide Achsen des temporären Koordinatensystems verwendet. Es findet also
eine proportionale Vergrößerung - durch einen Faktor größer 1 oder
eine proportionale Verkleinerung - durch einen Faktor zwischen 0 und 1
statt.
Es besteht jedoch auch die Möglichkeit zwei Faktoren zu verwenden.
Dann wird der erste Wert zu Skalierung der x-Achse und der zweite Wert zur Skalierung
der y-Achse verwendet.
Sie erzeugen dann eine nicht-proportionale Vergrößerung bzw. Verkleinerung des Objekts.
Wenn sie auf ein skaliertes Koordinatensystem weitere Transformationen anwenden, beachten
Sie, dass sich die Längen im Koordinatensystem entsprechend verändert haben.
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>scale - vergrößern oder verkleinern</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(20,10)" />
<use xlink:href="#ks" transform="translate(20,150) scale(.5)" />
<use xlink:href="#ks" transform="translate(150,150) scale(2)" />
<text x="25" y="90">orginale Darstellung</text>
<text x="25" y="250">halb so groß
<tspan x="25" y="265">scale(.5)</tspan>
</text>
<text x="155" y="250">doppelt so groß
<tspan x="155" y="265">scale(2)</tspan>
</text>
</svg>
</svg>
| 
