CODEWITHSUNDEEP
javascriptjquerysvg
user1405177
user1405177

Reputation: 477

How to animate existing SVG element with jQuery svg?

I have the following HTML with embedded svg:

<div id="container">
    <svg x="0px" y="0px" viewBox="0 0 100 100" preserveAspectRatio="none"
        width="100px" height="100px">
    <circle id="circle" fill-rule="evenodd" clip-rule="evenodd" fill="#FFC600"
        cx="50" cy="50" r="10"/>
    </svg>
</div>

I simply want to use KW jQuery SVG to animate the radius to 50. I try the following, but it does not work

$('#container').svg();
var svg = $('#container').svg('get');
$('#circle', svg.root()).animate({svgR: 50}, 1000);

Am I going at this the wrong way? I am a bit lost.

Upvotes: 0

Views: 1130

Answers (1)

user1405177
user1405177

Reputation: 477

It was a very stupid mistake. Make sure you include the jquery.svganim.js file. You will get no errors if you try to animate without it. Also, the above example can be simplified a lot:

<div id="container">
    <svg x="0px" y="0px" viewBox="0 0 100 100" preserveAspectRatio="none"
        width="100px" height="100px">
    <circle id="circle" fill-rule="evenodd" clip-rule="evenodd" fill="#FFC600"
        cx="50" cy="50" r="10"/>
    </svg>
</div>

<script type="text/javascript">
    $('#circle').animate({svgR: 50}, 1000);
</script>

Upvotes: 1

Related Questions