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>

如何使用jQuery svg为现有的SVG元素制作动画？

1 个答案: