有一个独立的动画svg。这是代码
<div style="width: 504px;">
<object id="conv1" type="image/svg+xml" data="1.svg"></object>
<p style="text-align: center;">
<button><span>Play/Replay</span></button>
</p>
</div>
我想在点击按钮播放/重播时重新加载/刷新(重新开始绘制svg)。这是网站链接。 http://mathsbeauty.esy.es/temp3.html 什么代码可以给Play / Replay按钮,可能使用javascript来实现这个目标?
答案 0 :(得分:2)
您可以完全从页面中删除svg元素并重新插入。只需克隆对象元素并将其替换为克隆对象元素。
document.querySelector("button").addEventListener("click", function() {
var element = document.querySelector("object");
var cloneElement = element.cloneNode(true);
element.parentNode.replaceChild(cloneElement, element);
}, false);
&#13;
object {
height: 75vh;
}
&#13;
<div style="width: 504px;">
<object id="conv1" type="image/svg+xml" data="http://mathsbeauty.esy.es/1.svg"></object>
<p style="text-align: center;">
<button><span>Play/Replay</span></button>
</p>
</div>
&#13;