在不使用css的情况下为svg中的多个路径设置动画

Question

我有一个包含路径数的svg文件。让它成为文件结构：

<g>
 <path>......</path>
 <path>......</path>
 <path>......</path>
 <path>......</path>
 <path>......</path>
 <path>......</path>
</g>

我想在不使用css的情况下将所有这些路径设置为动画，有点像这样：

<animate
  attributeName="fill-opacity" 
  from="0" 
  to="1" 
  dur="2s" 
  begin="3s"
  fill="freeze" />

我不想专门针对每条路径。

Answer 1

您需要做的就是将<animate>放入群组中，以便定位群组的fill-opacity值。路径将继承该不透明度。

<svg>
  <g fill-opacity="0">
    <animate
      attributeName="fill-opacity" 
      from="0" 
      to="1" 
      dur="2s" 
      begin="0s"
      fill="freeze" />

    <path d="M0,0 L100,0 L50,150 Z" fill="red"/>
    <path d="M150,0 L200,150 L100,150 Z" fill="limegreen"/>
    <path d="M200,0 L300,0 L250,150 Z" fill="purple"/>
  </g>
</svg>