20

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

但是，我只是在 IE10 上尝试过，当线条移动时，线条标记会落在后面。

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

我在 Windows 7 和 8 上都试过了。

有谁知道发生了什么？这是 IE10 错误，还是有其他方法可以移动线条和标记？

（请注意，实际的应用程序对性能非常敏感，所以我非常希望避免在移动它们时每帧重新创建线条之类的事情。）

-

编辑：这似乎是一个真正的 IE 10 错误。我在 IE 错误跟踪器中发现了一个未解决的问题（它甚至需要一个 Microsoft 帐户才能看到，这使得它对 Google 不可见。你好？），我已经添加了信息。IE还没有接受这个问题。

如果还有其他人们可以想到的解决方法，那将是很高兴听到的。完全删除结束标记，渲染，然后重新添加它们正常工作（显示可见闪烁），但不幸的是，在我的应用程序中是不可接受的。

4

4 回答 4

27

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

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

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

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

于 2013-07-02T08:38:22.490 回答
18

我想详细说明@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 上添加此补丁

于 2013-08-27T20:33:25.397 回答
1

在 ie10/11 中，我发现当它带有标记开始/标记结束属性时，该行不会移动，我试图在您的示例中删除这些属性，并且它可以工作。所以想法是在设置 x/y 之前删除属性，然后在所有工作完成后重置属性。

于 2016-08-19T10:27:31.183 回答
0

你可以试试这个技巧：

$("#button4").click(function () {
$("#line1")[0].setAttributeNS(null, "x1", 50);
$("#line1")[0].setAttributeNS(null, "y1", 50);
$("#line1")[0].setAttributeNS(null, "x2", 150);
$("#line1")[0].setAttributeNS(null, "y2", 50);
var oldAttValueDisplay = $("#line1")[0].getAttributeNS(null, "display");
$("#line1")[0].setAttributeNS(null, "display", "none");
setTimeout(function() {$("#line1")[0].setAttributeNS(null, "display", oldAttValueDisplay);}, 0);
// static: setTimeout(function() {$("#line1")[0].setAttributeNS(null, "display", "block");}, 0);

});

于 2013-04-25T11:57:52.113 回答