How to redraw SVG after change from javascript (Internet Explorer and Edge)
As it was mentioned by @rzelek, SVG image will get updated on it's own if you add elements with svg.appendChild()
rather than by assigning to svg.innerHTML
.
One caveat, though: you must specify the http://www.w3.org/2000/svg
namespace on the element you create using document.createElementNS()
, instead of the normal createElement()
.
Example:
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', '50');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('fill', 'red');
document.getElementById('svg').appendChild(circle);
JSFiddle
Basically, you do not need to reload anything. Actually, the problem is different. You will not able to interact with SVG using standard innerHTML
method. Your SVG is not updated after calling to innerHTML
. This method is suitable for editing HTML elements only.
Plase take a look at this: update SVG dynamically
Modify your markup as
<div id="container">
Your svg here
</div>
and add
document.getElementById("container").innerHTML += "";
at the end of your script.