当IE10中的行移动时,SVG行标记不会更新？

Question

我有一些带有线标记的SVG线,我有一个脚本可以移动这些线.这适用于所有浏览器,包括IE9.

但是,我只是在IE10上尝试过它,当线移动时,线标记会被遗忘.

这方面的一个例子可以在这里看到:http://jsfiddle.net/swYRK/8/

我在Windows 7和8上都尝试过这个.

有谁知道发生了什么？这是一个IE10错误,还是有另一种移动线和标记的方法？

(注意实际的应用程序对性能非常敏感,所以我非常希望避免在移动它们的时候每一帧都重新创建行,或者其他东西.)

-

编辑:这似乎是一个真正的IE 10错误.我在IE错误跟踪器中找到了一个未解决的问题(这需要一个Microsoft帐户才能看到,这使得谷歌看不到它.你好？),我已经添加了信息.IE还没有接受这个问题.

如果还有人们可以想到的任何其他解决方案,那将是很好听的.完全删除结束标记,渲染它们,然后重新添加它们work-ish(显示可见闪烁),但不幸的是在我的应用程序中是不可接受的.

Answer 1

这是一种快速的方法,效果很好.我没有注意到任何闪烁或性能相关的问题.

只需在其原始位置重新添加svg节点:

if (navigator.appVersion.indexOf("MSIE 10") != -1) {
    svgNode.parentNode.insertBefore(svgNode, svgNode);
}

当然,您可以使用任何浏览器嗅探选择..

Answer 2

我想详细说明@ChristianLund给出的惊人答案,以及我如何在我的代码中成功使用它

在我的力量动画中,我有一个tick看起来像这样的函数:

force.on("tick", function() {
  ...
});

我还在link变量中保存了所有图形链接,定义如下:

var link = svg.selectAll(".link").data(links).enter() ...

现在,为了实现Christian提出的魔力,我在tick函数的开头添加了这一行:

force.on("tick", function() {
  link.each(function() {this.parentNode.insertBefore(this, this); });
  ...
});

这似乎解决了IE 10的问题......当然,建议仅在IE 10上添加此补丁