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

Custom Search