Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 13   

13.9 Animierte Transformationen - animateTransform

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>
      



index  |  Kapitel 13  |  13.8  <<  | 13.9 |  >>  14   Filtereffekte