How to redraw SVG after change from javascript (Internet Explorer and Edge)

javascript svg microsoft-edge explorer
Piotr Antoniak picture Piotr Antoniak · Mar 31, 2016 · Viewed 17.6k times · Source

Does anyone know how to force IE and Edge to display/refresh embedded SVG after changing its content (see code below)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <script type="text/javascript">     
            function onClick() {           
                document.getElementById('svg').innerHTML = '<circle r="50" cx="50" cy="50" fill="red" />';
            }
        </script>
    </head>
    <body>  
        <button type="button" onclick="onClick()" >Display red circle</button>
        <svg id="svg"/>
    </body>
</html>

Answer

Yuri Andrienko picture Yuri Andrienko · Jul 7, 2019

Modify your markup as

<div id="container">
  Your svg here
</div>

and add 

document.getElementById("container").innerHTML += "";

at the end of your script.

Related questions

Convert SVG to image (JPEG, PNG, etc.) in the browser

I want to convert SVG into bitmap images (like JPEG, PNG, etc.) through JavaScript.

Read More
How to use z-index in svg elements?

I'm using the svg circles in my project like this, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <…

Read More
How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More