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

javascript svg microsoft-edge explorer

21,445

Solution 1

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

Solution 2

Modify your markup as

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

and add

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

at the end of your script.

Solution 3

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

21,445

Author by

Admin

Updated on April 16, 2020

Comments

Admin about 4 years

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>

Admin about 8 years

It does not solve my problem because I have to update a part of a SVG only. BTW. How could I get content of the SVG? It seems document.getElementById('svg').innerHTML does not work
Max Sorin about 8 years

I updated plunk. I can get the current innerHTML of the div containing the SVG. I can Set the content of the div containing the SVG. I am doing it async, and it is working for me in IE.
Admin about 8 years

I see... but is there a way to get/set the content (I don't know - innerHTML, innerText, etc.) of a <svg> tag? I can't use <div> ...
Max Sorin about 8 years

It would appear that you can change the content of the tag all day, but IE doesn't care to pass this update along to your eyeballs. Which is the reason you're asking this question in the first place, no?
Admin about 8 years

Yes, I really want to know why it behaves like that. But to be hones, I am rather looking for a workaround ot that "feature".
Max Sorin about 8 years

stackoverflow.com/questions/5966385/update-svg-dynamically That seems to really be what you want to do.
Robert Longson about 8 years

It used to be unsuitable but the specification changed and it should now work with SVG elements. Chrome and Firefox have implemented the new specification but IE and Safari have not yet done so.
Robert Longson about 8 years

@PiotrAntoniak innerHTML on Safari and IE add the content into the html namespace always instead of inferring the correct namespace from the container element.
Admin about 8 years

@Max Sorin. Finally I used your solution. Thanks
Admin about 8 years

@RobertLongson, that is right. This was the main reason I asked that question. Thank you.
Klesun about 4 years

Lol, it actually worked. Though in my case this was required because I used document.createElement() instead of document.createElementNS()
Klesun about 4 years

The answer this answer links to consists of just links itself =-D