我如何设置一组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是一只鸟的图画，这很复杂，包括许多不同的svgs

我的问题是：当提到一组svgs时，我如何使用动画？

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

我想为组内的所有svg元素使用一个animate行，这种写入方式似乎不起作用。谢谢！ 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"/>

动画同时在两个数字上进行插值，从而在从原点到终点的直线上产生对角线运动。