Auch für animierte Transformationen gibt es das spezielle Element
animateTransform.
Zusätzlich zu allen Attributen aus den Attributgruppen für
Animationen muß diesem Element noch das Attribute type
zugeordnet werden.
Mit dem Attribut
type geben Sie die Art der Transformation an:
translate, scale,
rotate, skewX und
skewY sind aktzeptierte Werte für dieses Attribut.
Der Wert matrix ist für dieses Attribut nicht zulässig.
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="500" height="200"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das animateTransform-Element</title>
<desc>Animierte Transformationen</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:44px;
font-weight:bold; fill:blue; stroke:black;}
rect {fill:yellow; stroke:blue; stroke-width:2px; opacity:0;}
circle {fill:#eeeeee; stroke:none;}
]]>
</style>
</defs>
<!-- Hintergrund circle und animiertes Hintergrund rect -->
<circle id="bg" cx="250" cy="100" r="100" />
<rect x="10" y="57" width="480" height="80">
<animate attributeName="opacity"
begin="9" dur="3"
from="0" to=".5"
fill="freeze" />
</rect>
<!-- 4 Animimierte Transformationen hintereinander
auf ein Text-Element angewandt -->
<text x="20" y="113">animateTransform
<animateTransform
attributeName="transform" type="scale"
begin="0" dur="3"
from="0" to="1" />
<animateTransform
attributeName="transform" type="rotate"
begin="3" dur="2"
from="0,250,120" to="-360,250,120" />
<animateTransform
attributeName="transform" type="translate"
begin="5" dur="2"
from="0" to="500" />
<animateTransform
attributeName="transform" type="translate"
begin="7" dur="2"
from="-420" to="0" />
</text>
</svg>
Im vorangegangenen Beispiel wurden die Animationen hintereinander abgespielt.
Sie können animierte Transformationen allerdings auch gleichzeitig abspielen lassen,
wenn Sie das Attribut additive mit dem Wert
sum für jedes einzelne
animateTransform-Element verwenden.
Dank für diesen Tipp an Christian.
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="500" height="200"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das animateTransform-Element</title>
<desc>Animierte Transformationen</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:44px;
font-weight:bold; fill:blue; stroke:black;}
rect {fill:yellow; stroke:blue; stroke-width:2px; opacity:0;}
circle {fill:#eeeeee; stroke:none;}
]]>
</style>
</defs>
<!-- Hintergrund circle und animiertes Hintergrund rect -->
<circle id="bg" cx="250" cy="100" r="100" />
<rect x="10" y="57" width="480" height="80">
<animate attributeName="opacity"
begin="1" dur="4"
from="0" to=".5"
fill="freeze" />
</rect>
<!-- 3 Animimierte Transformationen gleichzeitig
auf ein Text-Element angewandt -->
<text x="125" y="113">gleichzeitig
<animateTransform
attributeName="transform" type="scale"
begin="0" dur="5"
from="0" to="1"
additive="sum" />
<animateTransform
attributeName="transform" type="rotate"
begin="0" dur="5"
from="0,250,120" to="-360,250,120"
additive="sum" />
<animateTransform
attributeName="transform" type="translate"
begin="0" dur="5"
from="100,100" to="0,0"
additive="sum" />
</text>
</svg>
|