如何使用jQuery / JavaScript为svg路径制作动画?

时间:2016-12-16 15:11:24

标签: javascript jquery animation svg svg-animate

我想为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>

1 个答案:

答案 0 :(得分: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>