如何对一组 SVG 进行动画处理，而不是一次只对一个进行动画处理

Question

我有一个小的svg绘图，我想制作动画，它由几个SVG元素组成。我希望能够将它们动画化在一起，就好像它们是同一件事一样。

到目前为止，我已经将它们组合在一起，并在每个SVG的末尾放置了一个单独的动画，如下所示：

<g id="buildings">
  <rect fill="#aad4ff" height="22"  width="90" x="223.5" y="376.5">
    <animate attributeType="XML" attributeName="y" from="376.5" to="373" begin="mouseover" end="mouseout" dur="500ms"/>
  </rect>
  <rect fill="#aad4ff" height="117"  width="113" x="110.5" y="281.5">
    <animate attributeType="XML" at . . .
  </g>

如您所见，我有<直...><动画... />每个SVG，如果我的SVG是一只鸟的图画，由许多不同的SVG组成，这就变得很复杂了

我的问题是：在引用一组 SVG 时如何使用动画？

<g id="something">
  <ellipse cx="46.78408" cy="425.59942" fill="#ff5656"  rx="15" ry="16"/>
  <ellipse cx="50" cy="437" fill="#ff5656" rx="25" ry="10"/>
  <animate attributeType="XML" attributeName="cx" from="47" to="646" repeatCount="indefinite" dur="10s"/>
</g>

我想为组内的所有 SVG 元素使用一个动画行，但这种编写方式似乎不起作用。

PS - 这是一个项目，我不允许使用 CSS，如果这可以在 HTML 中完成，那将是最好的。

Answer 1

您只能对组的属性进行动画处理。你没有给出你想做什么的细节，但让我们假设你想在屏幕上从左到右移动你的鸟，而鸟的翅膀相对于它的身体移动。

这意味着您必须为每个单独的机翼定义翅膀运动，但屏幕上的运动可以定义为组的transform属性的动画。甚至还有一个专门的元素：

<g id="something">
    <animateTransform attributeType="XML" attributeName="transform" type="translate"
        from="0" to="600" repeatCount="indefinite" dur="10s"/>
    <ellipse cx="46.78408" cy="425.59942" fill="#ff5656"  rx="15" ry="16"/>
    <ellipse cx="50" cy="437" fill="#ff5656" rx="25" ry="10"/>
</g>

<animateTransform>的语法是"从属性transform="translate(0)"到transform="translate(600)""的缩写形式。translate()函数实际上有两个参数，x 和 y 相对运动。例如，transform="translate(600 100)"的意思是"向右走 600 步，向下走 100 步"。在动画元素中，只需要列出数字，如下所示：

    <animateTransform attributeType="XML" attributeName="transform" type="translate"
        from="0 0" to="600 100" repeatCount="indefinite" dur="10s"/>

动画同时对两个数字进行插值，导致从原点到终点的直线对角线移动。

Answer 2

如果需要在屏幕上一起移动组的多个元素，则需要将一个元素的动画替换为整个组的动画。

使用动画命令移动：

<animateTransform  xlink:href="#something" attributeName="transform" type="translate"
values="x1,y1;x2,y2" />

通过组合水平和垂直坐标的值，您可以获得：

• 水平移动一组元素：

values="x1,y1;x2,y1"

<svg  width="800" height="800" viewBox="800 800">
<g id="something" >
  <ellipse id="el1" cx="46" cy="42" fill="#ff5656"  rx="16" ry="16"/>
  <ellipse id="el2"cx="46" cy="43" fill="#B53D3D" rx="25" ry="10"/>
 </g>
<animateTransform  xlink:href="#something" attributeName="transform" type="translate"
values="0,10;300,0;0,10"  repeatCount="indefinite" dur="5s"/> 
</svg>

• 垂直移动一组元素：

values="x1,y1;x1,y2"

<svg  width="800" height="800" viewBox="800 800">
<g id="something" >
  <ellipse id="el1" cx="46" cy="42" fill="#ff5656"  rx="16" ry="16"/>
  <ellipse id="el2"cx="46" cy="43" fill="#B53D3D" rx="25" ry="10"/>
 </g>
<animateTransform  xlink:href="#something" attributeName="transform" type="translate"
values="0,10;0,300;0,10"  repeatCount="indefinite" dur="5s"/> 
</svg>

• 全方位运动：

values="x1,y1;x2,y2;x3,y3"

<svg  width="800" height="800" viewBox="800 800">
<g id="something" >
  <ellipse id="el1" cx="46" cy="42" fill="#ff5656"  rx="16" ry="16"/>
  <ellipse id="el2"cx="46" cy="43" fill="#B53D3D" rx="25" ry="10"/>
 </g>
<animateTransform  xlink:href="#something" attributeName="transform" type="translate"
values="
   0,10;
   50,250;
   100,150;
   200,300;
   100,400;
   0,10"
   repeatCount="indefinite"
   dur="5s"/> 
</svg>

您还可以使用此命令移动光栅或矢量图像

翻译

<svg  width="800" height="800" viewBox="800 800">
<image xlink:href="https://twemoji.maxcdn.com/svg/1f341.svg" width="25%" height="25%" >
 
<animateTransform  attributeName="transform" type="translate"
values="
   0,10;
   150,350;
   200,300;
   350,150;
   200,100;
   100,400;
   0,10"
   repeatCount="indefinite"
   dur="5s"/>  
  </image> 
</svg>