在不使用 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>