HTML and CSS Reference
In-Depth Information
SVG
animations aren't limited to simple attribute manipulations. Just
as you were able to make text follow a path, it's also possible to make
an animation follow a path. Here's an animation around a triangle.
You can see the changes for yourself in ch03/svg-19.html. Here are the
key points:
The ability to animate along a path allows you to define
animations of almost unlimited complexity.
<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>
<animateMotion
The same
<text>
element once
more.
The path draws three
lines (a triangle)
and closes.
This time the
<animateMotion>
element is used.
path="M0,0 l50,100 l-100,0 l50,-100 z"
dur="10s" repeatCount="indefinite">
</text>
The path is relative to
the current position
of the element.
The animation will last 10 seconds
and repeat indefinitely.
