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

好的，我通过以下方式更改为动画。

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

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

1 个答案: