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

我有以下带有嵌入式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>

---

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

这是一个非常愚蠢的错误。确保包含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>

$（#circle'）。制作动画（{svgR:50}，1000）；

您也可以使用此代码$（'circle'）.attr（'r'，50）更改半径@Chirag需要平滑地设置动画。

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