Question

我有一个简单的SVG，其中只有一个路径和两个<animate>元素，它们应该以250毫秒的过渡和返回来更改d属性。单击父级时，JavaScript会触发动画。这可以更改d属性，但没有转换;它只是立即发生。为什么它没有动画？

＆＃13;

var animationTo = document.getElementById("animation-to"),
  animationFrom = document.getElementById("animation-from");

button.addEventListener('click', function() {

  if (button.classList.contains("animated")) {
    button.classList.remove("animated");
    animationFrom.beginElement();
  } else {
    button.classList.add("animated");
    animationTo.beginElement();
  }

}, false);

＆＃13;

button svg {

  width: 40px;

  height: 40px;

  display: inline-block;

}

＆＃13;

<button id="button">

  <svg viewBox="0 0 24 24">

    <path id="play" d="m 2.5714275,0 0,24 9.4285695,-6.000001 0,-12 z m 9.4285695,5.999999 0,12 9.428576,-5.999998 0,0 z">

      <animate id="animation-to" begin="indefinite" fill="freeze" attributeName="d" dur="250ms" to="m 1.7142853,24 6.8571444,0 0,-24 -6.8571444,0 0,24 z M 15.428571,0 l 0,24 6.857144,0 0,-24 -6.857144,0 z" />

      <animate id="animation-from" begin="indefinite" fill="freeze" attributeName="d" dur="250ms" to="m 2.5714275,0 0,24 9.4285695,-6.000001 0,-12 z m 9.4285695,5.999999 0,12 9.428576,-5.999998 0,0 z" />

    </path>

  </svg>

</button>

＆＃13;

为什么这个svg路径没有动画？

0 个答案: