SVG 动画在开始前隐藏

Question

世界，您好，

我正在学习如何制作 SVG 动画，但我遇到了 begin="click" 的问题：该元素是不可见的，因此无法点击。

svg 元素在动画开始之前被隐藏是否正常？我怎样才能确保它是可见的（因此可以点击）？

非常感谢！

Answer 1

您必须将元素的 d 属性设置为默认值，否则它不会呈现任何内容：

.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>

SVG 动画在开始前隐藏

SVG animation is hidden before it begins

animation

svg

svg-animate