Search jQuery

jQuery Forum

jQuery SVG animate(move) group according to initial coordinate system

in Using jQuery Plugins • 12 years ago

Hi everyone!

I have a problem with moving group element. I want to move it according to initial coordinate system of parent svg container. But transform:translate(10,20) for example, establishes a new user coordinate system which origin (0,0) is absolute X=10, absolute Y=20.
How can I animate(move) group with absolute coordinates without writing additional functions to calculate this coordinates?

Replies(3)

kbwood.au

Re: jQuery SVG animate(move) group according to initial coordinate system

12 years ago

The SVG animate for the transform attribute replaces the entire value and doesn't build upon it. So you can use the values from the original coordinate system.

demonarch

Re: jQuery SVG animate(move) group according to initial coordinate system

12 years ago

I'm not sure that I understand clear.
Here is simple code:

<div id='divWrapper' style='width:1000; height:100'></div>
$('#divWrapper').svg();
var wrapper = $('divWrapper').svg('get');
var gr = svg.group({svgX:100,svgY:100});
svg.line(gr,75,95,75,120,{strokeWidth: 2, stroke: "blue"});
.... add more elements to group
$(gr).animate({svgTransform:"translate(10,10)"},2000); //move group to absolute coordinates (110,110)
$(gr).attr('transform','translate(10,10)'); //move group to absolute coordinates (110,110)
$(gr).animate({svgTransform:'matrix(1, 0, 0, 1,10,10)'},2000); //move group to absolute coordinates (110,110)

I want to move group to absolute coordinates (10,10)

kbwood.au

Re: jQuery SVG animate(move) group according to initial coordinate system

12 years ago

For this I think you need to base the group at 0,0 originally and then transform it from there:

$('#divWrapper').svg(initDraw);
function initDraw(svg) {
var gr = svg.group({transform: 'translate(100, 100)'});
svg.line(gr,75,95,75,120,{strokeWidth: 2, stroke: "blue"});
.... add more elements to group
$(gr).animate({svgTransform: 'translate(10,10)'}, 2000);
}

Also, you should only access the svg object from within the onLoad callback (as shown above) to ensure compatibility across browsers:

Top Reply

Response title

Attachments

jQuery Forum

jQuery SVG animate(move) group according to initial coordinate system

Replies(3)

Re: jQuery SVG animate(move) group according to initial coordinate system

Re: jQuery SVG animate(move) group according to initial coordinate system

Re: jQuery SVG animate(move) group according to initial coordinate system

Statistics

Tags

Actions