线在 IE10 中移动时 SVG 线标记不更新？答案

【问题标题】：SVG line markers not updating when line moves in IE10?线在 IE10 中移动时 SVG 线标记不更新？
【发布时间】：2013-03-19 13:26:56
【问题描述】：

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

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

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

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

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

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

编辑：这似乎是一个真正的 IE 10 错误。我找到了一个open issue in the IE bug tracker（它需要一个微软帐户才能看到，这使得它对谷歌不可见。你好？），我已经添加了信息。 IE 尚未接受该问题。

如果人们能想到任何其他变通方法，那将是很高兴听到的。完全删除结束标记，渲染它，然后重新添加它们正常工作（显示可见闪烁），但不幸的是，在my application 中是不可接受的。

【问题讨论】：

想法（未经测试；我没有 IE10）：如果您通过 setAttribute 而不是 DOM 更改位置，它是否有效？你可以申请 transform="translate()" 并修改它吗？您可以将每一行包装在您翻译的<g> 中，这会导致它变脏吗？如果在更改值后在所有内容上方或后面放置一个大矩形（或与旧位置和新位置的边界框重叠）以强制重绘怎么办。
使用 setAttribute 得到完全相同的结果。使用翻译，无论是在线上还是线自己的，似乎是一种非常复杂的方法来操纵将在任意点之间继续移动的线，因为我必须继续计算旋转、拉伸等。这里是实际用例：short.concord.org//1a。在 IE10 中，一旦箭头开始移动，所有箭头都会“落后”
当然；我不认为您正在单独移动端点。 transform 因此就出来了。更改后如何更改标记的属性，或换出线上的标记属性。
哇，这更奇怪了。如果我更改标记（例如交换它们），它们会随着线移动。如果我交换它们并再次将它们交换回来......它们就会被抛在后面。似乎如果 IE 在第一次交换时不强制重新渲染它们，那么当它们连续交换两次时它会完全忽略它们。因此，让它以一种不会导致标记明显闪烁或其他东西的方式工作可能会很棘手。小提琴示例：jsfiddle.net/swYRK/10
刚刚在 IE11 预览版上测试了这个，顺便说一下，还有这个错误。

标签： html svg internet-explorer-10

【解决方案1】：

你可以试试这个技巧：

$("#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);

});

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

+1 但也需要为 IE 11 更新这个:( 他们还没有修复它。
@RobertLevy 你可以告诉 M$ here。点击“我也可以”按钮告诉他们你可以复制。
@styfle 他们已经关闭了这个问题，下面的副本是不可修复的。我真的希望生活在 IE/EDGE 只是一个糟糕的记忆的时代
针对 Windows 10 的 IE11 修复，但不针对 Windows 7 的 IE11。两个系统的所有 Windows 更新都是最新的。刚刚完成测试...

【解决方案3】：

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

【讨论】：

出色的工作@talkol ！这个解决方案救了我的命:) 太棒了
你是从天上来的吗？

【解决方案4】：

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

【讨论】：