|
|
Consider the snapshots of the rotating rectangles rendered in Figure 9.3 and Figure 9.4.
Figure 9.3: A snapshot of rotating rectangles.
Figure 9.4: Another snapshot of rotating rectangles.
The SVG document rotatingRect1.svg in Listing 9.2 demonstrates how to use the SVG animateTransform element in order to rotate a pair of rectangles.
Listing 9.2 rotatingRect1.svg
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd"> <svg width="100%" height="100%"> <!-- rotation point: upper-left vertex --> <g transform="translate(150,150)"> <rect x="0" y="0" width="100" height="50" stroke-dasharray="4 4 4 4" fill="red" stroke="green" stroke-width="4"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" from="0" to="360" dur="4s"/> </rect> <ellipse cx="0" cy="0" rx="4" ry="4" style="fill:blue;stroke:none"/> </g> <!-- rotation point: center --> <g transform="translate(400,150)"> <rect x="-50" y="-25" width="100" height="50" stroke-dasharray="8 8 8 8" fill="yellow" stroke="green" stroke-width="4"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" from="0" to="360" dur="4s"/> </rect> <ellipse cx="0" cy="0" rx="4" ry="4" style="fill:blue;stroke:none"/> </g> </svg>
The SVG code in Listing 9.2 demonstrates how to use the SVG animateTransform element in order to rotate a pair of rectangles, one through its center, and the other through one of its vertices. The first rectangle is defined as follows:
<rect x="0" y="0" width="100" height="50" style="fill:red;stroke:green;stroke-width:4;">
The preceding SVG rect element defines a red rectangle with width 100 and height 50 and a green perimeter with a width of four pixels. This rectangle is rotated via the following SVG animateTransform element:
<animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" from="0" to="360" dur="4s"/>
The attributeType attribute can be either CSS or XML; in the former case, it refers to a CSS property of the SVG element, and in the latter case it refers to an attribute of the SVG element.
The type attribute has a value of rotate, which means that the transformation will be a rotation.
The fill attribute has a value of freeze, which means that the associated graphics element will not return to its original position when the animation effect is finished.
The from attribute specifies the starting angle for the rotation and has a value of 0, whereas the to attribute specifies the final angle for the rotation and has a value of 360.
The dur attribute specifies a value of 4s, which means that the animation will last for four seconds.
The angle of rotation is measured in degrees, and keep in mind that the positive direction for rotations is clockwise. If you double-click on this file, you will see a rotating rectangle that immediately begins rotating clockwise around a center point that coincides with the upper-left vertex of the rectangle and lasts for four seconds.
The second rectangle is defined as follows:
<g transform="translate(400,150)"> <rect x="-50" y="-25" width="100" height="50" style="fill:yellow;stroke:green;stroke-width:4;">
The preceding SVG rect element defines a yellow rectangle with width 100 and height 50 and a green perimeter with a width of four pixels. This rectangle is rotated via the following SVG animateTransform element:
<animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" from="0" to="360" dur="4s"/>
The attribute values for the second rectangle are similar in nature to those for the first rectangle.
Notice that two stationary circles are rendered via the SVG ellipse element. The first circle has a center that coincides with the upper-left vertex of the left rectangle, and the second circle has a center that coincides with the center of the right rectangle.
|
|