javascript - 更新 xlink :href for a <use> element 时，Internet Explorer 无法正确绘制 SVG

Question

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

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

如果您在 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

我找到了解决该问题的方法。

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

似乎改变了 <defs> 中的内容并不总是触发完整的重新绘制，所以我必须欺骗它之后进行重新绘制。在此示例中，我发现更改了 <use>在 <g>在 SVG 的顶层正确触发了重绘。

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