Search code examples
animationsvgsvg-animate

SVG animation is hidden before it begins

http://codepen.io/Asider/pen/mVBONd

Hello world,

I'm learning how to animate SVGs, and I've encountered a problem with begin="click" : the element is invisible and thus unclickable.

Is it normal that svg elements are hidden before their animation begin ? How can I make sure it's visible (and thus clickable) ?

Thanks a lot !

Solution

  • You have to set the element's d attribute to a default value, otherwise, it won't render anything : 

    .test {
  display: block;
  transform: scale(3);
  margin: 0 auto 50px;
  width: 50px;
  height: 50px;
}
    <svg class="test" viewBox="0 0 50 50">
  <path fill="#00ff00" d="M30.1,29.6V21l-5.3-5.4L19.9,21v3.3h-8.6v15.3h27.3V29.6H30.1z">
    <animate attributeName="d" values="M30.1,29.6V21l-5.3-5.4L19.9,21v3.3h-8.6v15.3h27.3V29.6H30.1z;
                    M30.1,23.6V16l-5.3-5.4L19.9,14v3.3h-8.6v22.3h27.3V23.6H30.1z;
                    M30.1,24.6V16l-5.3-5.4L19.9,16v3.3h-8.6v20.3h27.3V24.6H30.1z;" from="0" to="1" dur="1200ms" fill="freeze" begin="click" keyTimes="0; .8; 1" calcMode="linear" repeatcount="indefinite" />
  </path>
</svg>