Animating translation from current position to global target

Hi.

I'm having a problem in animating translation of a rect element. What I wan't to do is to move the rect (that only has stroke color) over currently selected rect element, that is I've got three rect elements and I want to move the fourth rect always over the one that has the mouseover - event called.

So what I would like to accomplish is to move the stroked rectangle to defined global position from it's current position (whatever that is). I've tried the animation with additive='replace' and additive='sum' with fill='freeze' but neither of them works.

I'm using SVG-T (tiny) profile so script usage is out of the question as well. Is there any way to make the element to remember its position and go from the previous position to a new position that is defined in global coordinates when event is raised?

As a reference, here's the code I've recently tried:

<path id="path1" d="m0 0 L29 5.5 " fill="none" stroke="none" />
<path id="path2" d="m0 0 L59 5.5 " fill="none" stroke="none" />
<path id="path3" d="m0 0 L118 5.5 " fill="none" stroke="none" />

<!-- Current slide indicator -->
<g id="currentSlideCs" transform="translate(29,5.5)">
<animateMotion dur="4s" begin="indicator2.mouseover" fill="freeze" additive="sum">
<mpath xlink:href="#path2" />
</animateMotion>
<animateMotion dur="4s" begin="indicator3.mouseover" fill="freeze" additive="sum">
<mpath xlink:href="#path3" />
</animateMotion>
<rect x="-19" y="-2.5" width="38" height="5" fill="none" stroke="blue" />
</g>


Thank You in advance,

thomas

You apply animateMotion elements to group and not to rect in your code
I think that it's not possible to animate from current position without script.

Perhaps this can help ?

<!-- Current slide indicator -->
<g id="currentSlideCs">
<rect id="indicator2" x="59" y="5.5" width="38" height="5" fill="red" stroke="none" />
<rect id="indicator3" x="118" y="5.5" width="38" height="5" fill="green" stroke="none" />
<rect width="38" height="5" fill="none" stroke="blue" pointer-events="visible">
<animateMotion dur="4s" begin="indicator2.mouseover" fill="freeze" repeatCount="1">
<mpath xlink:href="#path2" />
</animateMotion>
<animateMotion dur="4s" begin="indicator3.mouseover" fill="freeze" repeatCount="1">
<mpath xlink:href="#path3" />
</animateMotion>
</rect>
</g>

Michel

Thanks for your help guys. I got it working now.

Actually the solution wasn't more complex than this:

<!-- Current slide indicator -->
<g id="currentSlideCs">
<rect width="38" height="5" x="10" y="3" fill="none" stroke="blue">
<animate attributeName="x" attributeType="XML" begin="indicator2.mouseover" dur="4s" fill="freeze" to="69" />
<animate attributeName="x" attributeType="XML" begin="indicator3.mouseover" dur="4s" fill="freeze" to="128" />
<animate attributeName="x" attributeType="XML" begin="indicator1.mouseover" dur="4s" fill="freeze" to="10" />
</rect>
</g>

"keep it simple", eh? :roll:

- thomas