jQuery animate not working svg circle element

Question

我的html中有一个svg，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31px" height="559px" viewBox="0 0 31 559" version="1.1">
<title>pagination</title>
<g id="svg-container" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="11-copy-6" transform="translate(-112.000000, -847.000000)">
<g id="pagination" transform="translate(113.000000, 848.000000)">
<circle id="inner" fill="#FFFFFF" cx="14.5" cy="14.5" r="9.5"/>
<circle id="outer" stroke="#FFFFFF" cx="14.5" cy="14.5" r="14.5"/>
<circle id="outer-2" stroke="#FFFFFF" cx="14.5" cy="200.5" r="9.5"/>
<circle id="outer-3" stroke="#FFFFFF" cx="14.5" cy="374.5" r="9.5"/>
<circle id="outer-4" stroke="#FFFFFF" cx="14.5" cy="547.5" r="9.5"/>
<path d="M14.5,29 L14.5,191" id="Line" stroke="#FFFFFF" stroke-linecap="square"/>
<path d="M14.5,210.225038 L14.5,365.225038" id="Line-Copy" stroke="#FFFFFF" stroke-linecap="square"/>
<path d="M14.5,384 L14.5,538.225038" id="Line-Copy-2" stroke="#FFFFFF" stroke-linecap="square"/>
</g>
</g>
</g>
</svg>

我正在尝试用 id ininner 改变圆圈的位置，如下所示：

let x = $('circle#inner')
x.animate({top: '187px'}, 500)

但它不起作用，我做错了什么？

Answer 1

jQuery animate 用于对 HTML 元素进行动画处理。对于 SVG，您必须尝试 jQuery SVG 插件。请点击链接 - http://keith-wood.name/svg.html

没有插件是可能的，但它涉及一个技巧。问题是x不是css属性，而是一个属性，jQuery.animate只对css属性进行动画处理。但是，您可以使用 step 参数为动画指定自己的自定义行为。

foo 是一个不存在的属性，我们在 step 函数中使用其动画值。

$('#btn').click(function(){
$('#dice_1').animate(
{'foo':200},
{
step: function(foo){
$(this).attr('x', foo);
},
duration: 2000
}
);
});