У меня есть несколько строк SVG с маркерами строк на них, и у меня есть script, который перемещает эти строки вокруг. Это отлично работает во всех браузерах, включая IE9.
Однако, я просто попробовал это на IE10, и маркеры линий останутся позади, когда линия движется.
Пример этого можно увидеть здесь: http://jsfiddle.net/swYRK/8/
Я пробовал это как на Windows 7, так и на 8.
Кто-нибудь знает, что происходит? Это ошибка IE10, или есть ли другой способ перемещения строки и маркеров?
(Обратите внимание, что фактическое приложение очень чувствительно к производительности, поэтому я очень хочу избегать делать что-то вроде повторного создания строк в каждом кадре, пока я их перемещаю, или что-то в этом роде.)
-
Изменить: это похоже на реальную ошибку IE 10. Я обнаружил одну открытую проблему в отладчике ошибок IE (для чего требуется учетная запись Microsoft, что делает ее недоступной для Google.) добавили информацию. IE еще не принял эту проблему.
Если есть какие-то другие проблемы, о которых люди могут подумать, это было бы здорово услышать. К сожалению, полное удаление концевых маркеров, их рендеринг, а затем повторное добавление их работает-ish (показывается видимое мигание), но не приемлемо в моем приложении./p >
Это быстрый способ сделать это, что хорошо работает. Я не заметил никаких мерцающих или связанных с производительностью проблем.
Просто заново добавьте svg node в оригинальное место:
if (navigator.appVersion.indexOf("MSIE 10") != -1) {
svgNode.parentNode.insertBefore(svgNode, svgNode);
}
Конечно, вы можете использовать любой браузер, который понюхает выбор.
Я хочу немного рассказать об удивительном ответе @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
В ie10/11 я обнаружил, что строка не перемещается, когда она с атрибутом маркер-старт/маркер-конец, я попытался удалить эти атрибуты в вашем примере, и он работает. Поэтому идея заключается в удалении атрибутов перед установкой x/y, затем reset атрибутов после выполнения всех заданий.
Вы можете попробовать этот хак:
$("#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);
});