Маркеры линий SVG не обновляются, когда строка перемещается в IE10?

У меня есть несколько строк SVG с маркерами строк на них, и у меня есть script, который перемещает эти строки вокруг. Это отлично работает во всех браузерах, включая IE9.

Однако, я просто попробовал это на IE10, и маркеры линий останутся позади, когда линия движется.

Пример этого можно увидеть здесь: http://jsfiddle.net/swYRK/8/

Я пробовал это как на Windows 7, так и на 8.

Кто-нибудь знает, что происходит? Это ошибка IE10, или есть ли другой способ перемещения строки и маркеров?

(Обратите внимание, что фактическое приложение очень чувствительно к производительности, поэтому я очень хочу избегать делать что-то вроде повторного создания строк в каждом кадре, пока я их перемещаю, или что-то в этом роде.)

Изменить: это похоже на реальную ошибку IE 10. Я обнаружил одну открытую проблему в отладчике ошибок IE (для чего требуется учетная запись Microsoft, что делает ее недоступной для Google.) добавили информацию. IE еще не принял эту проблему.

Если есть какие-то другие проблемы, о которых люди могут подумать, это было бы здорово услышать. К сожалению, полное удаление концевых маркеров, их рендеринг, а затем повторное добавление их работает-ish (показывается видимое мигание), но не приемлемо в моем приложении./p >

Ответ 1

Это быстрый способ сделать это, что хорошо работает. Я не заметил никаких мерцающих или связанных с производительностью проблем.

Просто заново добавьте svg node в оригинальное место:

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

Конечно, вы можете использовать любой браузер, который понюхает выбор.

Ответ 2

Я хочу немного рассказать об удивительном ответе @ChristianLund и о том, как я успешно использовал его в своем коде

В моей силовой анимации у меня есть функция tick, которая выглядит так:

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

Я также сохраняю все мои ссылки в графе внутри переменной link, определенную так:

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

Теперь, чтобы реализовать магию, предложенную Кристианом, я добавил эту строку в начале моей функции tick:

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

Это, по-видимому, устраняет проблемы IE 10... конечно, рекомендуется добавлять этот патч только в IE 10

Ответ 3

В ie10/11 я обнаружил, что строка не перемещается, когда она с атрибутом маркер-старт/маркер-конец, я попытался удалить эти атрибуты в вашем примере, и он работает. Поэтому идея заключается в удалении атрибутов перед установкой x/y, затем reset атрибутов после выполнения всех заданий.

Ответ 4

Вы можете попробовать этот хак:

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

});