Continuous Rotation of a Text String

---

Multiple Animation Effects

Consider the snapshots of a rotating text string in Figure 9.13 and Figure 9.14.

Figure 9.13: A snapshot of a text string undergoing multiple animation effects.

Figure 9.14: Another snapshot of a text string undergoing multiple animation effects.

The SVG document in Listing 9.7 demonstrates how to render a string of text with multiple animation effects.

Listing 9.7 animateText1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!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">   <g transform="translate(100,100)">     <text x="0" y="0" font-size="48" visibility="hidden"           stroke="black" stroke-width="2">       Animating Text       <set attributeName="visibility"            attributeType="CSS" to="visible"            begin="2s" dur="5s" fill="freeze"/>       <animateMotion path="M0,0 L50,150"            begin="2s" dur="5s" fill="freeze"/>       <animateColor attributeName="fill"            attributeType="CSS"            from="yellow" to="red"            begin="2s" dur="8s" fill="freeze"/>       <animateTransform attributeName="transform"            attributeType="XML"            type="rotate" from="-90" to="0"            begin="2s" dur="5s" fill="freeze"/>       <animateTransform attributeName="transform"            attributeType="XML"            type="scale" from=".5" to="1.5" additive="sum"            begin="2s" dur="5s" fill="freeze"/>     </text>   </g> </svg>

Remarks

The SVG code in Listing 9.7 simultaneously rotates and scales a text string while changing the color of that string-rather impressive, especially when you consider the fact that this SVG document is only about half a page in length. The SVG text element has four SVG animation-related elements associated with it, two of which are new to you. Let's first look at the SVG animateMotion element listed below:

<animateMotion path="M0,0 L50,150"      begin="2s" dur="5s" fill="freeze"/> 

The preceding SVG path attribute specifies a line segment whose starting point is (0,0) and whose end point is (50,150), which starts its rotation two seconds after the document is loaded (begin="2s") and then rotates for five seconds (dur="5s"), after which it will not return to its original position (fill="freeze").

Now take a look at the SVG animateColor element given below:

<animateColor attributeName="fill"      attributeType="CSS"      from="yellow" to="red"      begin="2s" dur="8s" fill="freeze"/>

The SVG atttributeType attribute has a value of CSS, which means that the effect pertains to a CSS attribute associated with the SVG text element; in this case, it's the color of the text.

The animateColor element will start changing color two seconds after the document has been loaded (begin="2s") and during a span of eight seconds (dur="8") the color will start with yellow (from=" yellow") and end with the color red (to="red") and then remain in that position (fill=" freeze").

The last two SVG animate effects have already been described in previous examples, so you can refer to them in case you've forgotten how they work.

---