Question

Hello world，

我正在学习如何为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动画在开始之前隐藏

1 个答案: