Internet Explorer Draws Svg Incorrectly When Updating Xlink:href For A Element

https://jsfiddle.net/swoq9g3f/1/ I am having a problem where a simple SVG is drawn incorrectly in Internet Explorer (v11.0.9600.17728) after I change a xlink:href with javascript.

Solution 1:

I found a workaround for the problem.

https://jsfiddle.net/swoq9g3f/9/

It seems that changing things in the <defs> does not always trigger a full repaint, so I then have to trick it into doing a repaint afterwards. In this example I found changing the <use> in the <g> in the top level of the SVG correctly triggered a repaint.

SVG:

<svgid="svg_element"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="400"height="400"><defs><svgid="def1"width="300"height="300"><g><circlecx="150"cy="150"r="100" /><circlecx="150"cy="150"r="50"/></g></svg><svgid="def2"><useid="use_element"xlink:href="#def1" /></svg></defs><gfill="white"stroke="black"><useid="use_element_2"xlink:href="#def2" /></g></svg>

Javascript:

document.getElementById("use_element").setAttributeNS('http://www.w3.org/1999/xlink','href','#def1')

document.getElementById("use_element_2").setAttributeNS('http://www.w3.org/1999/xlink','href','#def2')

Solution 2:

This happens in IE when updating xlink:href="...", but also when updating clip-path=url(...). The problem is that the DOM isn't up to date and needs to be refreshed, which can be forced manually.

To force an update (an immediate, synchronous reflow or relayout), you can read an element property like offsetTop. This forces the browser to repaint the element before it can give you the offsetTop value.

This is mentioned in this talk: Faster HTML and CSS: Layout Engine Internals for Web Developers (at 37:10)

I use this function, and whenever I have changed an svg I call this.

functionrepaintThisElement(element){
   var tmp = 0;
   if (navigator.appName == 'Microsoft Internet Explorer'){
      tmp = elementOnShow.parentNode.offsetTop  +  'px';
   }else{
      tmp = elementOnShow.offsetTop;
   }
}