Problem with animateMotion

Hello everyone,

I put an animateMotion on a groupe, which i change the path with some functions. On mouse over the path is:Animation.setAttribute("path","M0,0 A100,95 0 0,1 160,420"); and on mouse out the path is the opposite Animation.setAttribute("path","M160,420 A100,95 0 0,0 0,0");. This is working fine as long as the target did not reach her final destination. As soon as it got to the wanted destination, the animation is not working anymore: it is not following the path, it is going in a straight line.
I am not sure i was clear enough but if someone understood and knows what is going wrong i would appreciate his help.

Thanks in advance, sebastien.

Please, give attributes for animation element (repeatCount, fill .... )
or best complete code.

Michel

the code in my svg

<g id="Sphere">
<circle cx="35" cy="80" r="20" fill="none" stroke="red" stroke-width="4">
</circle>
<circle cx="35" cy="80" r="18" fill="white" stroke="black">
</circle>
<line x1="17" y1="80" x2="53" y2="80" fill="white" stroke="black" stroke-width="4">
</line>
<circle cx="35" cy="80" r="7" fill="white" stroke="black" stroke-width="4">
<animate attributeName="cx" attributeType="XML" begin="0s" dur="5s" repeatCount="indefinite" from="24" to="44"/>
</circle>
<animateMotion id="Animation" path="" dur="5s" fill="freeze"/>
</g>

my functions:

function AnimationAller()//Chemin du logo pour aller sur le menu mouseover
{
Animation=svgDocument.getElementById("Animation");
Animation.setAttribute("path","M0,0 A100,95 0 0,1 160,420");
}

function AnimationRetour()//Chemin retour pour le logo mouseout
{
Animation=svgDocument.getElementById("Animation");
Animation.setAttribute("path","M160,420 A100,95 0 0,0 0,0");
}

Thanks michel

I add repeatCount="indefinite" in your animateMotion and use getCurrentTime and setCurrentTime to give smooth animation ...
Try this
<svg>
<rect x="400" y="100" width="100" height="50" fill="gray" onmouseover="Animation(1)" onmouseout="Animation(2)"/>
<g id="Sphere">
<circle cx="35" cy="80" r="20" fill="none" stroke="red" stroke-width="4">
</circle>
<circle cx="35" cy="80" r="18" fill="white" stroke="black">
</circle>
<line x1="17" y1="80" x2="53" y2="80" fill="white" stroke="black" stroke-width="4">
</line>
<circle cx="35" cy="80" r="7" fill="white" stroke="black" stroke-width="4">
<animate attributeName="cx" attributeType="XML" begin="0s" dur="5s" repeatCount="indefinite" from="24" to="44"/>
</circle>
<animateMotion id="Animation" path="M160,420 A100,95 0 0,0 0,0" dur="5s" repeatCount="indefinite"/>
</g>
<script>
function Animation(param)
{
time = parseFloat(evt.target.ownerDocument.rootElement.ge tCurrentTime()) % 5
evt.target.ownerDocument.rootElement.setCurrentTim e(5 - time)
if (param == 1 )
evt.target.ownerDocument.getElementById("Animation").setAttribute("path","M0,0 A100,95 0 0,1 160,420");
else
evt.target.ownerDocument.getElementById("Animation").setAttribute("path","M160,420 A100,95 0 0,0 0,0");
}
</script>
</svg>
Michel

Ok michel it is working , not perfectly, but good enough. The problem is that on the way back the object does not leave from the same starting point.

Anyway thanks a lot michel.

Also i still don't really know, why my code is not working. I mean except the use of getCurrentTime and setCurrentTime, it is the same.

sebastien

The problem is that on the way back the object does not leave from the same starting point.
You can add boolean to know if animation is running.
If not you set current time to 0.
Put empty string for path in animateMotion.
var go = false
function Animation(param)
{
if (!go)
{
go = true
evt.target.ownerDocument.rootElement.setCurrentTim e(0)
}
// same code after

Michel