Menu
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>
927
Modify your markup as
<div id="container">
Your svg here
</div>
and add
document.getElementById("container").innerHTML += "";
at the end of your script.
117
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
37
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
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
