我计划在我的网站上添加一个大的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>
您可以将SMIL动画用于SVG。
在要设置动画的组中添加<animateTransform>元素，起点和终点位置在边界之外。将repeatCount设置为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/aloshea/ms0n8dwb/