如何使用jQuery SVG为现有SVG元素设置动画？

Question

我有以下带有嵌入式svg的HTML：

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

我走错路了吗？ 我有点迷路。

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>