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

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.