Animating Transformations | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Rotating a Line Segment

Consider the snapshots of the line segment in Figure 9.1 and Figure 9.2.

Figure 9.1: A snapshot of a rotating line segment.

Figure 9.2: Another snapshot of a rotating line segment.

The SVG document in Listing 9.1 demonstrates how to use the SVG animateTransform element in order to rotate a line segment.

Listing 9.1 rotatingLineSegment1.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%">   <g transform="translate(200,180)">     <line x1="0" y1="0"       x2="150"   y2="0"       stroke-dasharray="4 4 4 4"       stroke="blue" stroke-width="8"/>     <line x1="0" y1="0"       x2="150"   y2="0"       stroke-dasharray="8 8 8 8"       stroke="red" stroke-width="8">       <animateTransform attributeName="transform"                         attributeType="XML"                         type="rotate"                         from="0" to="360" dur="4s"/>     </line>   </g> </svg>

Remarks

Listing 9.1 specifies two line segments: the first line segment is stationary while the second line segment rotates clockwise one revolution during a four-second interval by means of the following SVG animateTransform element:

<animateTransform attributeName="transform"                   attributeType="XML"                   type="rotate"                   from="0" to="360" dur="4s"/>

Let's take a closer look at the purpose of the attributes in the preceding SVG element.

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 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 the positive direction for rotations is clockwise. If you double-click on this file, you will see a rotating line segment that immediately begins rotating around a center point that coincides with the left end point of the line segment and lasts for four seconds.