HTML and CSS Reference
Let's look in detail at how this is done in the listing from ch03/svg-
Unlike the <canvas> element you don't need to resort to
the same XML markup used to describe the shapes themselves.
This is the same <text>
element used in the
<text x="0" y="120" font-family="sans-serif" font-size="80"
font-weight="bold" fill="url(#img1)" >
<tspan x="0" y="180" font-size="70">ROCKS!</tspan>
you'll animate the
of the transform.
To animate, add an
extra child node. the
A semicolon−separated list
of values for translate .
Once complete, repeat
The animation will Begin
immediately and run for a
duration of 10 seconds.
Note that, unlike with animations on <canvas> , you don't have to write
programs to redraw the scene every second. You just declare what the
animation should be and let the browser get on with it. This is why SVG
animation was earlier referred to as declarative animation.