CODEWITHSUNDEEP
htmlcsssvgsvg-animate
Kalpesh Prithyani
Kalpesh Prithyani

Reputation: 35

animate multiple paths in svg without using css

I have an svg file with number of paths. Let this be the file structure :

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

I want to animate all these paths together without using css, somewhat like this:

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

I don't want to aim each path specifically.

Upvotes: 1

Views: 1827

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

All you need to do is put your <animate> in the group so that you target the group's fill-opacity value. The paths will inherit that 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>

Upvotes: 5

Related Questions