SVG - 如何同时为几个元素制作动画?

Question

我需要对多个 svg 元素进行动画处理，我正在使用这种结构：

<g>
<circle cx="" cy="" r="7" class="pulse">
<animateMotion dur="25s" repeatCount="indefinite">
<mpath xlink:href="#t1" />
</animateMotion>
</circle>
<circle cx="" cy="" r="7">
<animateMotion dur="25s" repeatCount="indefinite">
<mpath xlink:href="#t1" />
</animateMotion>
</circle>
</g>

它工作正常，但我有 100 多个元素需要制作动画。我可以使用 animateMotion 进行分组吗？或者也许同时具有多个元素？

Answer 1

一次只能对一个元素进行动画处理，但该元素可以是容器(如<g>)，在这种情况下，所有内容都将进行动画处理。

<svg width="150" height="150" viewBox="0 0 150 150"
>
<defs>
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" id="t1"/>
</defs>
<g>
<animateMotion dur="25s" repeatCount="indefinite">
<mpath xlink:href="#t1" />
</animateMotion>
<circle cx="5" cy="5" r="7" fill="red"/>
<circle cx="25" cy="5" r="7"/>
</g>
</svg>

Answer 2

Robert Longson正确地说，在某个时间点，你只能运行一个对象或一组对象，使用命令animateMotion

但是使用命令textPath、animate和unicode characters，您可以同时运行任意数量的对象。

这种效果可以与移动的字母串的效果进行比较，但始终可以使用标签内的dx ="x"dy ="y"来定位单个运动对象<tspan>

<svg width="600" height="400" viewBox="100 100 400 300">
<path id="pathTrain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>
<text font-size="32"  font-family="Times New Roman" fill="black" >
<textPath id="result"    xlink:href="#pathTrain">
<tspan dx="0" > &#128645; </tspan> <tspan dx="-15">  &#128643; </tspan><tspan dx="-15"> &#128643;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#128643;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-12">&#128643;</tspan>
<animate  dur="10s" repeatCount="2" attributeName="startOffset" values="55%;1%;55%"/> 
</textPath>
</text>				
			
</svg>