如何使用 jQuery/JavaScript 为 svg 路径设置动画？

Question

我想为 svg 的路径设置动画。我知道这可以用 <animate> 来实现，但动画只有在元素附加到某些 div 后才会开始。所以我需要找到另一个解决方案，但我无法在网上找到任何帮助。

这是fiddle所以你可以看看我有什么。

注意：现在我想要 svg 的路径来拉伸 svg。所以一开始，它是一个三角形，但它需要平滑地转换成适合周围svg的正方形。

谢谢！

// -- click the path -- //

$('path').on('click touch', function() {
  $(this).parents('svg').css({
    height: '100vh',
    width: '100vw'
  });
})

/* -- click the path -- */

* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden; /* -- just for this example */
}

svg {
  -webkit-transition:
    height 350ms ease-in-out,
    width 350ms ease-in-out;
  transition:
    height 350ms ease-in-out,
    width 350ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- click the path -->

<svg fill="#000" xmlns="http://www.w3.org/2000/svg" version="1.0" height="200" width="200" viewBox="0 0 1024 1024">
  <path d="M0 0 L405 0 L405 635"/>
</svg>

Answer 1

SMIL 动画（即使用 <animate> 的动画）可以在单击时启动。

<svg fill="#000" xmlns="http://www.w3.org/2000/svg" version="1.0" height="200" width="200" viewBox="0 0 1024 1024">
  <path d="M0 0 L405 0 L405 635 L405 635">
    <animate attributeName="d" dur="350ms" to="M0 0 L405 0 L405 635 L0 635"
             begin="click" fill="freeze" />
  </path>
</svg>

如何使用 jQuery/JavaScript 为 svg 路径设置动画？

How to animate svg path with jQuery/JavaScript?

javascript

jquery

animation

svg

svg-animate