Move HTML5 SVG path

Question

I have a SVG path element in my application, like:

<path d="M100,100 Q200,400,300,100"/>

In a button click I have to move this path to the left, for example, from 100 to 200. I did it with the transform:

$('.path').each(function () {
    $(this).attr('transform', 'translate(100, 0)');
});

However, on the next click it does not move. How can I get the path element to move on each click?

Answer 1

The translate will try to do exactly the same thing again. You need to store the value in a variable and use that:

var x=0;
$('.path').each(function () {
   x += 100;
   $(this).attr('transform', 'translate('+x+', 0)');
});

This example shows that you can move it 100 to right every click, so workout what you want to apply to x and you should be laughing.