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