如何在 Windows10 中解决 Internet Explorer 隐藏 svg：在 DOM 中移动元素后使用元素答案

【问题标题】：How to work around Internet Explorer in Windows10 hiding svg:use element after moving it in DOM如何在 Windows10 中解决 Internet Explorer 隐藏 svg：在 DOM 中移动元素后使用元素
【发布时间】：2016-04-22 20:35:02
【问题描述】：

当我将 svg:use 元素从一个 svg:g 移动到另一个 svg:g 时，Windows10 上的 Internet Explorer 隐藏它在移动之后。

示例：使用jquery，我将ID为“red_circle”的svg:g从ID为“source_group”的svg:g移动到ID为“target_group”的svg:g。在 Windows10 上的 IE 中，这会在移动后隐藏圆圈。

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <circle id="c1" cx="50" cy="50" r="40"/>
</defs>
<g id="source_group"> 
  <g id="red_circle" style="fill:red">
    <use xlink:href="#c1"></use>
  </g>
</g>
<g id="target_group">
</g>

$("#red_circle").click(function(e){
  $("#target_group").append(this);
});

在 Windows10 上的 Internet Explorer 中运行此 fiddle 以查看问题：单击圆圈将其移动到 target_group 并且 IE 将其隐藏。 Windows8 或 7 上的 chrome 甚至 IE 等其他浏览器则没有。

这是我的问题：

Microsoft 是否已解决此问题？如果是，是否有跟踪问题的链接？如果不是，向 Microsoft 解决此问题的最佳方式是什么？
您知道解决此问题的方法吗？

【问题讨论】：

Internet Explorer 11 ?
由于某种原因，没有点击事件它可以工作：jsfiddle.net/vLqb4Lz3
我在使用 VMWare 进行 Windows10 仿真的 IE11（版本 11.0.10240.16644）中看到了这个问题。当我在这个 IE11 浏览器中模拟 IE10 或 IE9 时，我也看到了这个问题。在我的 Windows10 VMWare 仿真中运行“Edge”浏览器（版本 20.10240.16384.0）我无法使用上面链接的小提琴重现此问题。在我的常规 Windows8 机器上的 IE11（版本 11.0.9600.18161）中，我也无法用小提琴重现该问题。
如果你想在 IE 中工作，最好避免使用 jquery。 Chrome 和 Firefox 神奇地修复了命名空间，而 IE 没有。

标签： jquery internet-explorer svg

【解决方案1】：

我最近遇到了与“查询查找前缀”类似的问题，我不知道为什么 Edge 不理解命名空间前缀，因为我验证了我拥有的 xml 文档，有节点。

案例 A) $(xml).find("a:\value") -> 适用于 IE、Chrome 和 Sarafi，不适用于 Edge

案例 B) $(xml).find("value") -> 在 Edge 中工作

解决方案）$(xml).find("a:\value, value") 无处不在

【讨论】：