Chained Animation Effects | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Continuous Rotation of a Text String

Consider the snapshots of a rotating string of text rendered in Figure 9.11 and Figure 9.12.

Figure 9.11: A snapshot of a rotating string of text.

Figure 9.12: Another snapshot of a rotating string of text.

The SVG document in Listing 9.6 demonstrates how to combine the SVG text element and the SVG animateTransform attribute in order to rotate two text strings 360% in the clockwise direction at different rates.

Listing 9.6 rotatingTextPair1.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(0,0)">    <text  x="200" y="200"          fill="red" fill-opacity="1"          font-size="24">       Rotating text    </text>   <animateTransform         begin="0s" dur="4s" type="rotate"         from="0 200 200" to="360 200 200"         fill="freeze"         attributeName="transform"/> </g> <g transform="translate(0,0)">    <text  x="200" y="200"          fill="red" fill-opacity="1"          font-size="24">       Rotating text    </text>   <animateTransform         begin="0s" dur="8s" type="rotate"         from="0 200 200" to="360 200 200"         fill="freeze"         attributeName="transform"/> </g> </svg>

Remarks

The SVG code in Listing 9.6 renders two text strings, both of which have the value Rotating Text, with a fill value of red and a font size of 24. The first SVG g element rotates the text string about the center point (200, 200) for four seconds by means of the following code:

<animateTransform       begin="0s" dur="4s" type="rotate"       from="0 200 200" to="360 200 200"       fill="freeze"       attributeName="transform"/>

On the other hand, the second SVG g element rotates the text string about the center point (200,200) for eight seconds:

<animateTransform        begin="0s" dur="8s" type="rotate"        from="0 200 200" to="360 200 200"        fill="freeze"        attributeName="transform"/>

Since the second SVG g element rotates its enclosed text string at half the speed of the first SVG g element, the two rotating strings create the impression of a delayed and slightly overlapping effect.