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的i值，如果我的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"/>

我想对组内的所有svg元素使用一条动画行，这种书写方式似乎行不通。谢谢！附言：这是一个项目，如果可以在html中做到最好，则不允许使用css。

Answer 1

如果你需要在屏幕上一起移动一组的几个元素，那么你需要用整个组的动画替换一个元素的动画。

使用动画命令移动：

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

Answer 2

您只能为组的属性设置动画。您没有提供要精确执行的操作的详细信息，但是假设您要在屏幕上从左向右移动小鸟，而小鸟的翅膀则相对于它的身体移动。

这意味着您必须为每个单独的机翼定义机翼运动，但是可以将整个屏幕上的运动定义为该组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”。在animation元素中，只需要列出数字，如下所示：

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

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

我如何为一组SVG设置动画，而不是一次只设置动画？

2 个答案: