当为< use>更新xlink:href时，Internet Explorer会错误地绘制SVG.元素

问题描述

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

我遇到的问题是，在用JavaScript更改 xlink:href 后，在Internet Explorer(v11.0.9600.17728)中错误地绘制了一个简单的SVG.

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.

如果仅在IE中渲染SVG，则会得到两个同心圆.javascript将< use> 元素的 xlink:href 值设置为#def1 ，这是之前的值.此IE之后，仅渲染较大的圆圈，而较小的圆圈则隐藏在其后面.较小的圆圈位于svg文档的后面，这意味着它应始终显示在较大圆圈的顶部.我还包括对 forceRedraw()的一些调用，但它们无法解决问题.

If you render just the SVG in IE you get two concentric circles. The javascript sets the xlink:href value for a <use> element to #def1, which is the value it was previously. After this IE renders only the larger circle, with the smaller circle hidden behind it. The smaller circle is later in the svg document meaning that it should always render on top of the larger circle. I also included some calls to forceRedraw(), but they fail to correct the issue.

在Chrome或Firefox中不会发生此问题.是什么原因造成的?有办法解决该问题吗?

This problem does not happen in Chrome or Firefox. What is causing this? Is there a way to work around the problem?

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:

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()

推荐答案

在IE中，当更新 xlink:href ="..." 时，以及在更新 clip-path时，都会发生这种情况= url(...).问题在于DOM不是最新的，需要刷新，可以手动强制.

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.

要强制进行更新(立即，同步重排或重排)，您可以读取 offsetTop 之类的元素属性.这会迫使浏览器在为元素提供 offsetTop 值之前重新绘制元素.

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.

在本次演讲中提到了这一点:更快的HTML和CSS:Web开发人员的布局引擎内部原理(在37:10)

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

我使用此功能，每当更改svg时，我都将其称为.

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

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

这篇关于当为< use>更新xlink:href时，Internet Explorer会错误地绘制SVG.元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！