jQuery 動畫不工作 svg 圓元素

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 內部更改圓圈的位置，如下所示：

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 } ); });