クリック時にSVGのリフレッシュ/再読み込み/再起動

Question

スタンドアロンのアニメーション化された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を使用してどのようなコードを再生/再生ボタンに与えることができますか？

Answer 1

ページからsvg要素を完全に削除して、再度挿入することができます。オブジェクト要素を複製し、複製したものと置き換えるだけです。

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>