CODEWITHSUNDEEP
javascripthtmlsvg
mathsbeauty
mathsbeauty

Reputation: 366

Refresh/Reload/Restart for SVG on click

There is a stand alone animated svg. Here is the code

<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>

I want to reload/refresh (restart drawing svg) on clicking the button play/replay. Here is the website link. http://mathsbeauty.esy.es/temp3.html What code can be given to Play/Replay button, probably using javascript so as to achieve this?

Upvotes: 1

Views: 8055

Answers (1)

user4447799
user4447799

Reputation:

You can remove the svg element from the page entirely and re-insert it. Just clone the object element and replace it with the cloned one.

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>

Upvotes: 2

Related Questions