刷新/重新加载/重新启动SVG单击

Refresh/Reload/Restart for SVG on click

本文关键字：重新启动 单击 加载 SVG 新加载 刷新      更新时间：2023-09-26

有一个独立的动画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什么代码可以给播放/重播按钮，可能使用javascript来实现这一点?

您可以从页面中完全删除svg元素并重新插入它。只需克隆object元素并用克隆的元素替换它。

document.querySelector("button").addEventListener("click", function() {
   var element = document.querySelector("object");
   var cloneElement = element.cloneNode(true);
   element.parentNode.replaceChild(cloneElement, element); 
}, false);
object {
    height: 75vh;
}
<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>

相关文章：