jQuery анимация не работает элемент круга svg

Question

У меня есть svg в моем html, например:

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

Я пытаюсь изменить положение круга с внутренним идентификатором, например:

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. Но вы можете использовать параметр шага, чтобы указать собственное поведение анимации.

foo - несуществующее свойство, значение анимации которого мы используем в функции шага.

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