HTML and CSS Reference
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
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"
<tspan x="0" y="180" font-size="70">ROCKS!</tspan>
The same <text>
The path draws three
lines (a triangle)
This time the
element is used.
path="M0,0 l50,100 l-100,0 l50,-100 z"
The path is relative to
the current position
of the element.
The animation will last 10 seconds
and repeat indefinitely.