Search jQuery

jQuery Forum

Using jQuery Plugins

psaustin

jQuery svg - Animate causes group to jump back to its original position.

in Using jQuery Plugins • 11 years ago

Hi,

I'm trying to use jQuery svg to add a simple spinning effect to a drawing (complete code below).

There is one drawing consisting of three paths in a group. I'm trying to rotate the drawing around its centre.

I have two issues with this code:

When I call the rotate method passing in the x, y coordinates of the rotation, the x, y coordinates don't seem to be honoured.
Every time I call the animate method, the drawing is returned to its original size and position.

Please could someone help me out here?

Thanks,

Paul.

<html>
<head>
<title>SVG Test</title>
<link rel="stylesheet" href="style/jquery.svg.css" type="text/css"
/>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery.svg.js"></script>
<script type="text/javascript" src="script/jquery.svganim.js"></script>
<script language="javascript" type="text/javascript">
function buttonClicked() {
$('#iconDiv').svg($('#svg2'));
var svg = $('#iconDiv').svg('get');
var gr = svg.getElementById('g15');
$(gr).animate({
svgTransform: 'rotate(720,600,500)'
}, 3000);
$(gr).animate({
svgTransform: 'rotate(0)'
}, 0);
}
</script>
</head>
<body>
<input type="button" value="animate" onclick="buttonClicked();" />
<div id="iconDiv" style="width: 800px; height: 500px; border: 1px solid #484">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<g transform="matrix(0.25,0,0,-0.25,-50,250)" id="g15">
<path d="m 697.685,531.402 c -15.398,0 -278.417,0.464 -278.417,0.464 0,0 -13.734,-23.621 -24.463,-42.223 -17.637,-30.521 -9.568,-98.558 75.668,-98.866 l 136.614,-0.505 c 30.151,0 53.733,18.387 69.987,46.547 14.124,24.424 60.465,104.739 60.465,104.739 0,0 -13.906,-10.156 -39.854,-10.156"
id="path32" style="fill:#00adef;fill-opacity:1;fill-rule:nonzero;stroke:none"
/>
<path d="m 750.056,657.52 -67.477,118.272 c -15.07,26.118 -42.784,37.329 -75.292,37.329 l -120.962,0 c 0,0 15.772,-6.965 28.712,-29.442 8.876,-15.352 138.467,-241.033 138.467,-241.033 0,0 27.318,-0.097 48.795,-0.097 35.233,0 90.134,41.007 47.757,114.971"
id="path36" style="fill:#00adef;fill-opacity:1;fill-rule:nonzero;stroke:none"
/>
</g>
</svg>
</div>
</body>
</html>

[Reformatted]

Replies(2)

psaustin

Re: jQuery svg - Animate causes group to jump back to its original position.

11 years ago

Can anyone help?

kbwood.au

Re: jQuery svg - Animate causes group to jump back to its original position.

11 years ago

Animating the rotation on an element that already has a matrix transformation confuses the plugin. Try adding an extra group around the one you want animated and just rotate that. Also, it looks like you only want to rotate the image around a particular point, in which case you should specify that point in both transformations so that it doesn't vary. Apply the SVG plugin to the inline SVG rather than the containing div. And set the size of the svg element explicitly. Try this:

<html>
<head>
<title>SVG Test</title>
<link rel="stylesheet" href="css/jquery.svg.css" type="text/css"/>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery.svg.js"></script>
<script type="text/javascript" src="script/jquery.svganim.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
var svg = null;
$('svg').svg(function(s) { // Initialise on the inline svg element
svg = s;
svg.configure({width: 800, height: 500}); // Set the SVG size explicitly
});
$('#animate').click(function() { // When the button is clicked
$('#g14', svg.root()). // Find the new container group
animate({svgTransform: 'rotate(720, 300, 250)'}, 3000, function() { // Rotate it twice
$(this).attr('transform', 'rotate(0, 300, 250)'); // And reset at the end
});
});
});
</script>
</head>
<body>
<input type="button" id="animate" value="animate" />
<div id="iconDiv" style="width: 800px; height: 500px; border: 1px solid #484">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<g id="g14" transform="rotate(0, 300, 250)">
<g transform="matrix(0.25,0,0,-0.25,-50,250)" id="g15">
<path d="m 697.685,531.402 c -15.398,0 -278.417,0.464 -278.417,0.464 0,0 -13.734,-23.621 -24.463,-42.223 -17.637,-30.521 -9.568,-98.558 75.668,-98.866 l 136.614,-0.505 c 30.151,0 53.733,18.387 69.987,46.547 14.124,24.424 60.465,104.739 60.465,104.739 0,0 -13.906,-10.156 -39.854,-10.156"
id="path32" style="fill:#00adef;fill-opacity:1;fill-rule:nonzero;stroke:none"
/>
<path d="m 750.056,657.52 -67.477,118.272 c -15.07,26.118 -42.784,37.329 -75.292,37.329 l -120.962,0 c 0,0 15.772,-6.965 28.712,-29.442 8.876,-15.352 138.467,-241.033 138.467,-241.033 0,0 27.318,-0.097 48.795,-0.097 35.233,0 90.134,41.007 47.757,114.971"
id="path36" style="fill:#00adef;fill-opacity:1;fill-rule:nonzero;stroke:none"
/>
</g>
</g>
</svg>
</div>
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

jQuery svg - Animate causes group to jump back to its original position.

Replies(2)

Re: jQuery svg - Animate causes group to jump back to its original position.

Re: jQuery svg - Animate causes group to jump back to its original position.

Statistics

Tags

Actions