这是从头开始SVG元素中的重新开始吗？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了这是从头开始SVG元素中的重新开始吗？相关的知识，希望对你有一定的参考价值。
只需知道我们如何重新启动内的元素序列。谢谢。
https://jsfiddle.net/nya13/4hzkno1f/3/
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="23" r="13" fill="#e15b64">
<animate attributeName="cy" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" keyTimes="0;0.5;1" values="23;77;23"></animate>
</circle>
</svg>
<button onclick="RestartAnimate();">Restart Animate</button>
</body>
<script>
function RestartAnimate() {
// Do something...
}
</script>
</html>
答案
[<button onclick="RestartAnimate();">您必须删除分号
分配动画标识符<animate id="an"
分配begin="indefinite"
在下面的示例中，在按下按钮重新启动动画之后，该循环重复三遍。
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="23" r="13" fill="#e15b64">
<animate id="an" attributeName="cy" dur="1s" repeatCount="3" begin="indefinite" calcMode="spline" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" keyTimes="0;0.5;1" values="23;77;23"></animate>
</circle>
</svg>
<button onclick="RestartAnimate()">Restart Animate</button>
</body>
<script>
var animation = document.getElementById("an")
function RestartAnimate() {
animation.beginElement();
}
</script>
</html> 以上是关于这是从头开始SVG元素中的重新开始吗？的主要内容，如果未能解决你的问题，请参考以下文章