Move HTML5 SVG path

html, jquery, jquery-svg, svg

Solution

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.

Problem

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?

Original source