0

我打算在我的网站上添加一个大的 svg 文件，并希望将动画添加到某个组。

“火车”应该从左边移动到写入，离开框架并返回，在一个循环中，而不是背景。

如何 ？（下面的代码不是完整的，我剪了很大一部分使它适合这里）

<svg>
<g id="train">
    <g>
        <path class="st12" d="M88.22,156.12c0,0.7-0.57,1.26-1.26,1.26c-0.7,0-1.26-0.57-1.26-1.26c0-0.7,0.57-1.26,1.26-1.26
                    C87.65,154.86,88.22,155.43,88.22,156.12z"/>
        <path class="st12" d="M86.95,157.61c-0.82,0-1.48-0.66-1.48-1.48c0-0.82,0.66-1.48,1.48-1.48c0.82,0,1.48,0.66,1.48,1.48
                    C88.44,156.94,87.77,157.61,86.95,157.61z M86.95,155.08c-0.58,0-1.05,0.47-1.05,1.05c0,0.58,0.47,1.05,1.05,1.05
                    c0.58,0,1.05-0.47,1.05-1.05C88,155.55,87.53,155.08,86.95,155.08z"/>
    </g>
    <g>
        <path class="st12" d="M93.92,156.12c0,0.7-0.57,1.26-1.26,1.26c-0.7,0-1.26-0.57-1.26-1.26c0-0.7,0.57-1.26,1.26-1.26
                    C93.35,154.86,93.92,155.43,93.92,156.12z"/>
        <path class="st12" d="M92.65,157.61c-0.82,0-1.48-0.66-1.48-1.48c0-0.82,0.66-1.48,1.48-1.48c0.82,0,1.48,0.66,1.48,1.48
                    C94.13,156.94,93.47,157.61,92.65,157.61z M92.65,155.08c-0.58,0-1.05,0.47-1.05,1.05c0,0.58,0.47,1.05,1.05,1.05
                    c0.58,0,1.05-0.47,1.05-1.05C93.7,155.55,93.23,155.08,92.65,155.08z"/>
    </g>
</g>
</svg>
4

1 回答 1

2

您可以将SMIL 动画用于 SVG。

<animateTransform>在要设置动画的组内添加一个元素，开始和结束位置在边界之外。将repeatCountto设置infinite为永远循环。

<g id="train">
<animateTransform
       attributeName="transform"
       begin="0s"
       dur="1s"
       type="translate"
       from="-50 10"
       to="150 10"
       repeatCount="indefinite" 
            />
</g>

这是一个简化的工作示例：https ://jsfiddle.net/alosea/ms0n8dwb/

于 2020-07-20T13:47:45.750 回答