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路径制作动画？

1 个答案: