10.5    Rotationen

Die Rotation eines SVG-Elements mithilfe der Anweisung rotate gehört zu der Gruppe der Transformationen. Ich führe sie erst hier ein, weil sie im Zusammenhang mit einer Animation anschaulicher ist. Die anderen Arten von Transformationen lassen sich, zumindest bezüglich eines einzelnen SVG-Elements, auch durch Eigenschaftsänderungen erreichen:

Innerhalb der Datei svg_rotation.htm sehen Sie nach dem Laden des Dokuments drei Rechtecke mit grauer Füllung, siehe Abbildung 10.12. Die beiden Rechtecke auf der linken Seite liegen übereinander. Das obere Rechteck ist gegenüber dem unteren Rechteck um 30 Grad gedreht. Der Drehpunkt (oder genauer gesagt: der Punkt, an dem die Drehachse den Bildschirm durchbohrt) ist dabei das Zentrum des Rechtecks. Sie können auch andere Drehpunkte festlegen, z. B. eine Ecke des Rechtecks oder den Nullpunkt der SVG-Grafik ganz oben links.

Feste Rotation des vorderen linken Rechtecks

Abbildung 10.12    Feste Rotation des vorderen linken Rechtecks

Nach kurzer Zeit beginnt eine Animation für das Rechteck auf der rechten Seite. Es wird kontinuierlich von der Startposition bei 0 Grad zur Endposition von 30 Grad gedreht, siehe Abbildung 10.13.

Nach der animierten Rotation des rechten Rechtecks

Abbildung 10.13    Nach der animierten Rotation des rechten Rechtecks

Es folgt der Code:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>SVG, Rotation</title>
</head>
<body>
   <svg xmlns="http://www.w3.org/2000/svg" width="400px"
         height="200px" style="border:1px solid black">
      <g stroke="#000000" stroke-width="2" fill="#bbbbbb">
         <rect x="50"  y="75" width="100" height="50" />
         <rect x="50"  y="75" width="100" height="50"
            transform="rotate(30, 100, 100)" />
         <rect x="250" y="75" width="100" height="50">
            <animateTransform attributeName="transform"
               type="rotate" begin="1" dur="2" from="0, 300, 100"
               to="30, 300, 100" fill="freeze" />
         </rect>
      </g>
   </svg>
</body></html>

Listing 10.11    Datei »svg_rotation.htm«

Die beiden Rechtecke befinden sich in einer Gruppe, in der die Eigenschaften für die Füllung und die Rahmenlinie festgelegt werden.

Das obere Rechteck auf der linken Seite verfügt über das Attribut transform. Als Wert für dieses Attribut werden die möglichen Transformationen angegeben, z. B. translate, scale, skewX, skewY oder (wie im vorliegenden Fall) rotate, gefolgt von Werten in Klammern. Bei einer Rotation ist dies der Wert für den Drehwinkel in Grad, gefolgt von den Koordinaten des Drehpunkts.

Die Animation ist dem Rechteck auf der rechten Seite als Kindknoten untergeordnet. Die Markierung animateTransform dient zur Erstellung einer Transformationsanimation für das übergeordnete Element. Das Attribut attributeName erhält den Wert transform.

Im Falle einer Rotationsanimation erhält das Attribut type den Wert rotate. Die Wirkung der Attribute begin, dur und fill ist bereits bekannt. Die Werte der Attribute from und to werden auf die selbe Weise notiert wie weiter oben: zunächst der Drehwinkel in Grad, gefolgt von den Koordinaten des Drehpunkts. Alternativ können Sie auch das Attribut values nutzen. Im vorliegenden Fall sähe das wie folgt aus:

values="0,300,100;30,300,100"