我如何为一组 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>

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

<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>