Html 如何设置svg文件g元素的动画？

我计划在我的网站上添加一个大的svg文件，并且只想在某个组中添加动画

“火车”应该以循环的方式从左到右移动，从帧外到帧后，而不是在背景中

怎么做？（下面的代码不是完整的代码，我剪切了很大一部分使其适合这里）

您可以将其用于SVG

添加可用于SVG的

添加一个
您可以在设置转换动画的地方使用css动画您可以分享您所尝试的吗？有很多方法可以制作SVG动画（javascript、CSS动画、CSS转换、SMIL），所有这些都是通过pros/Cons实现的。您可以在制作转换动画的地方使用CSS动画。您可以分享您的尝试吗？有很多方法可以制作SVG动画（javascript、CSS动画、CSS转换、SMIL），所有这些都有其优缺点
<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>

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