Question

我在使用javascript更改xlink:href后，在Internet Explorer（v11.0.9600.17728）中错误地绘制了一个简单的SVG时遇到了问题。

如果在IE中仅渲染SVG，则会得到两个同心圆。 javascript将xlink:href元素的<use>值设置为#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

更新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;
   }
}

更新xlink：href以获取<use>元素时，Internet Explorer会错误地绘制SVG

1 个答案: