Как анимировать существующий элемент SVG с помощью jQuery svg?

Question

У меня есть следующий HTML со встроенным 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> 

Я просто хочу, чтобы использовать KW jQuery SVG анимировать радиус 50. Я стараюсь следующее, но он не работает

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

Am I не так ли? Я немного потерян.

Answer 1

Это была очень глупая ошибка. Убедитесь, что вы включили файл jquery.svganim.js. Вы не получите никаких ошибок, если попытаетесь анимировать без него. Кроме того, приведенный выше пример может быть упрощен:

<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>