的Internet Explorer更新時的XLink繪製S​​VG錯誤：爲<use>元素的href

Question

https://jsfiddle.net/swoq9g3f/1/

我有其中一個簡單的SVG在Internet Explorer（v11.0.9600.17728）正確繪製一個問題，我改變xlink:href與後JavaScript的。

如果你在IE中渲染的只是SVG，你會得到兩個同心圓。 javascript將<use>元素的xlink:href值設置爲#def1，這是之前的值。在這個IE瀏覽器渲染出更大的圓圈後，隱藏在它後面的小圓圈。較小的圓圈稍後在svg文檔中表示它應該始終在較大的圓圈上進行渲染。我還包括一些致電forceRedraw()的電話，但他們未能糾正問題。

在Chrome或Firefox中不會發生此問題。這是什麼造成的？有沒有辦法解決這個問題？

SVG：

<svg id="svg_element" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> 
    <defs> 
    <svg id="def1" width="300" height="300"> 
     <g> 
     <circle cx="150" cy="150" r="100" /> 
     <circle cx="150" cy="150" r="50" /> 
     </g> 
    </svg> 

    <svg id="def2"> 
     <use id="use_element" xlink:href="#def1" /> 
    </svg> 
    </defs> 

    <g fill="white" stroke="black" > 
    <use xlink:href="#def2" /> 
    </g> 
</svg> 

的Javascript：

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

document.getElementById("def1").forceRedraw() 
document.getElementById("def2").forceRedraw() 
document.getElementById("svg_element").forceRedraw() 

Answer 1

，我發現該問題的解決方法。

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

似乎在<defs>改變事物並不總是觸發完全重繪，所以後來我必須把它誘使後來做了重新繪製。在這個例子中，我發現改變SVG頂層的<g>中的<use>正確觸發了重繪。

SVG：

<svg id="svg_element" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> 
    <defs> 
    <svg id="def1" width="300" height="300"> 
     <g> 
     <circle cx="150" cy="150" r="100" /> 
     <circle cx="150" cy="150" r="50"/> 
     </g> 
    </svg> 

    <svg id="def2"> 
     <use id="use_element" xlink:href="#def1" /> 
    </svg> 
    </defs> 

    <g fill="white" stroke="black"> 
    <use id="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') 

Answer 2

更新xlink:href="..."的時候，還更新clip-path=url(...)當這發生在IE瀏覽器。問題是DOM不是最新的，需要刷新，這可以手動強制。

要強制更新（立即，同步迴流或重新佈局），您可以讀取像offsetTop這樣的元素屬性。這會強制瀏覽器重新繪製元素，然後它可以爲您提供offsetTop值。

這在這次談話中提到：Faster HTML and CSS: Layout Engine Internals for Web Developers（以37:10）

我使用這個功能，每當我已經改變了SVG我把這個。

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