Rotating a Line Segment

   



Rotating Rectangles

Consider the snapshots of the rotating rectangles rendered in Figure 9.3 and Figure 9.4.

click to expand
Figure 9.3: A snapshot of rotating rectangles.

click to expand
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

start example
<?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>
end example

Remarks

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.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net