>Hi.
>I need some help with animations in svg files.
>I want to display a series of paths (all different) in a svg file, how do I
>do that?
Why not to use a series of path elements?
If you need a series of path fragments in one d attribute
of a path, just start the new fragment with one of the
commands m or M.
If you need to 'switch' from one path to another, you can
use for example an animation of the display property
to remove the paths that have to be invisible at a
current time. In SVG tiny 1.2 it is possible too to
animate the d attribute discrete with different paths.
Or do you want to 'morph' within an animation from
one path to another continuously?
In SVG1.1 then you need paths of the same structure,
the same number and types of commands in the same
order in the d element and only the numbers are changing.
In SVG tiny 1.2 the condition with the same commands
is lifted a little bit (for details see the CR).
>
>Also, Is there a way to display a path,
set stroke to some visible colour and maybe stroke-width
to a useful value, maybe fill to none.
>and draw the path once more
put a fragment identifier (id attribute on the path)
and reference it with a use element...
>and then
>let it move or rotate
use animateTransform of the related type to do
that, type translate or rotate. Or use animateMotion
for the motion part. Apply the animation to the use element
>to conicide with the original path?
well, just start the animation with an offset and finish it
with '0'
>Thanks.
example:
<g stroke="red" fill="none" stroke-width="5">
<path id="p1" d="M0,0C-100,-100 100 -100 100 100">
<animate attributeName="d" values="
M0,0C-100,-100 100 -100 100 100;
M50,-50C100,100 -100 -100 -100 -100;
M0,0C-100,-100 100 -100 100 100"
dur="4s" repeatDur="9s" fill="freeze" />
</path>
<use xlink:href="#p1" stroke="blue">
<animateTransform attributeName="transform" type="rotate"
values="30 70 90; -370 20 -30; 0 0 0" dur="10s" begin="10s" />
</use>
</g>
If this was not what you expected, please try to explain
in more detail the problem (I cannot see any from my
point of view ;o)
Have fun with SVG....
