Logo des Bilungsservers

Eine Seite des Sächsischen Bildungsservers

Beispielseite SVG - Animation von SVG- Objekten
SVG- Grafik Quelltext der SVG- Grafik
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="200" height="400">

<rect x="0" y="0" width="100" height="200"

style="fill:rgb(255,153,51)">

<animateColor attributeName="fill" from="rgb(255,152,51)" to="rgb(51,204,51)"

begin="3s" dur="6s" fill="freeze"/>

<animate attributeName="width" from="100" to="200"

begin="9s" dur="6s" fill="freeze" />

<animate attributeName="height" from="200" to="400"

begin="15s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" type="rotate" from="0" to="180"

begin="21s" dur="6s" fill="freeze" />

<animateMotion path="M 0 0 L 200 400"

begin="27s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" type="scale" from="1" to="-2"

begin="34s" dur="6s" fill="freeze" />

</rect>

</svg>