javascript - 无法在 SVG g 元素上应用动画

Question

我有以下 SVG文件。

        <svg
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            xmlns:cc="http://creativecommons.org/ns#"
            xmlns:rdf="htntp://www.w3.org/1999/02/22-rdf-syntax-ns#"
            xmlns:svg="http://www.w3.org/2000/svg"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            width="1000"
            height="650"
            id="svgContainer">

            <g
                id="truck">
                <animate attributeName="fill" from="black" to="red" dur="5s"/>
                <path
                    d="m 655.589,484.36218 -6.18561,-128.61524 -110.99241,-15.79583 -34.55321,-87.58893 -94.74579,0 3.03024,178.75619 -322.238663,2.0203 0.145305,51.22351 z"
                    id="body"
                    fill="#000000"
                    stroke="#000000"
                    stroke-width="1px"
                    stroke-linecap="butt"
                    stroke-linejoin="miter"
                    stroke-opacity="1" />
                <animate attributeType="XML" attributeName="x" to="1000" begin="indefinite" dur="1s" />
                <animate attributeType="XML" attributeName="y" to="1000" begin="indefinite" dur="1s" />
            </g>
        </svg>
    </g>
</svg>

我只想用动画将它移动到其他地方，但它不起作用。我在这里缺少什么吗？ (我想用里面的所有内容为 g 元素设置动画。为了简单起见，我删除了其余元素。)

Answer 1

OK，我这里改成了动画，如下。

<animateTransform
    attributeType="XML"
    attributeName="transform"
    type="translate"
    from="0,0" to="1000,1000"
    begin="0s" dur="1"
    repeatCount="indefinite"/>

它开始起作用了。

更新

我找到了更好的解决方案。在第一个中，动画后我的组元素返回到其原始位置。对于以下内容，它会保持原样。

<animateMotion
    from="0,0" to="500,0"
    dur="4s" fill="freeze"/>