jQuery动画不起作用svg圈子元素

我的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内部更改圆的位置,如下所示:

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

但是它不起作用,我在做什么错?

评论
  • 纠结
    纠结 回复

    jQuery animate is for animating HTML elements. For SVG you have to try jQuery SVG plugin. Please follow the link - 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
            }
        );
    });