HTML and CSS Reference
In-Depth Information
Let's look in detail at how this is done in the listing from ch03/svg-
18.html.
Unlike the <canvas> element you don't need to resort to
JavaScript to get animation. Animations can be described using
the same XML markup used to describe the shapes themselves.
This is the same <text>
element used in the
previous example.
<text x="0" y="120" font-family="sans-serif" font-size="80"
font-weight="bold" fill="url(#img1)" >
<tspan>HTML5</tspan>
<tspan x="0" y="180" font-size="70">ROCKS!</tspan>
<animateTransform fill="freeze"
you'll animate the
translate property
of the transform.
To animate, add an
extra child node. the
attributes determine
the animation.
attributeName="transform" type="translate"
values="0,0;0,220;0,0"
A semicolon‚ąíseparated list
of values for translate .
begin="0s" dur="10s"
Once complete, repeat
indefinitely.
repeatCount="indefinite">
</text>
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.
Search WWH ::




Custom Search