Counter Rotating Ellipses | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Rectangles and Multiple Animation Effects

Consider the snapshot of the rectangle in Figure 9.7 and Figure 9.8.

Figure 9.7: A snapshot of a rectangle with multiple animation effects.

Figure 9.8: Another snapshot of a rectangle with multiple animation effects.

The SVG document animateRect1.svg in Listing 9.4 demonstrates how to use multiple SVG animate elements in order to render a rectangle with multiple changing attributes.

Listing 9.4 animateRect1.svg

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg">   <rect fill="red" stroke-width="1" stroke="blue"         x="300" y="100" width="300" height="100">     <animate attributeName="stroke" attributeType="XML"              begin="1s" dur="5s"              fill="freeze" from="blue" to="yellow"/>     <animate attributeName="stroke-width"              attributeType="XML"              begin="1s" dur="5s"              fill="freeze" from="1" to="40"/>     <animate attributeName="x" attributeType="XML"              begin="1s" dur="5s"              fill="freeze" from="300" to="100"/>     <animate attributeName="y" attributeType="XML"              begin="2s" dur="5s"              fill="freeze" from="100" to="50"/>     <animate attributeName="width" attributeType="XML"              begin="3s" dur="5s"              fill="freeze" from="300" to="500"/>     <animate attributeName="height" attributeType="XML"              begin="4s" dur="5s"              fill="freeze" from="100" to="300"/>   </rect> </svg>

Remarks

The SVG code in Listing 9.4 contains six SVG animate elements that are applied to a rectangle in order to create an animation effect. The initial rectangle has a width of 300, a height of 100, and a blue perimeter that is one pixel wide; its upper-left vertex is located at the point (300,100), as specified in the following code fragment:

<rect fill="red" stroke-width="1" stroke="blue"       x="300" y="100" width="300" height="100">

The first SVG animate element starts after one second and lasts for five seconds, during which time the color of the perimeter of the rectangle changes from blue to yellow:

<animate attributeName="stroke" attributeType="XML"          begin="1s" dur="5s"          fill="freeze" from="blue" to="yellow"/>

The second SVG animate element starts after one second and lasts for five seconds, during which time the width of the perimeter increases from one pixel to forty pixels:

<animate attributeName="stroke-width"          attributeType="XML"          begin="1s" dur="5s"          fill="freeze" from="1" to="40"/>

The third SVG animate element starts after one second and lasts for five seconds, during which time the x-coordinate of the upper-left vertex of the rectangle changes from 300 to 100:

<animate attributeName="x" attributeType="XML"          begin="1s" dur="5s"          fill="freeze" from="300" to="100"/>

The fourth SVG animate element starts after two seconds and lasts for five seconds, during which time the y-coordinate of the upper-left vertex of the rectangle changes from 100 to 50:

<animate attributeName="y" attributeType="XML"          begin="2s" dur="5s"          fill="freeze" from="100" to="50"/>

The fifth SVG animate element starts after three seconds and lasts for five seconds, during which time the width of the rectangle from 300 to 100:

<animate attributeName="width" attributeType="XML"          begin="3s" dur="5s"          fill="freeze" from="300" to="500"/>

The sixth and final SVG animate element starts after four seconds and lasts for five seconds, during which time the height of the rectangle changes from 100 to 300:

<animate attributeName="height" attributeType="XML"          begin="4s" dur="5s"          fill="freeze" from="100" to="300"/>