20

行マーカーが付いた SVG 行がいくつかあり、それらの行を移動するスクリプトがあります。これは、IE9 を含むすべてのブラウザーで正常に機能します。

ただし、IE10で試したところ、行が移動すると行マーカーが取り残されます。

この例はここで見ることができます: http://jsfiddle.net/swYRK/8/

Windows 7 と 8 の両方でこれを試しました。

何が起こっているか知っている人はいますか？これは IE10 のバグですか、それとも線とマーカーを移動する別の方法はありますか?

（実際のアプリケーションはパフォーマンスに非常に敏感なので、移動中にフレームごとに線を再作成するなどのことは避けたいと思います。）

-

編集: これは実際の IE 10 のバグのようです。IE バグ トラッカーで1 つの未解決の問題を見つけました (これを見るには Microsoft アカウントが必要であり、Google には表示されません。こんにちは?)、これに情報を追加しました。IE はまだこの問題を受け入れていません。

人々が考えることができる他の回避策があれば、それを聞いてうれしいです. エンド マーカーを完全に削除し、それをレンダリングしてから再度追加するとうまくいきますが (目に見える点滅が表示されます) 、残念ながら私のアプリケーションでは受け入れられません。

4

4 に答える 4

18

@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 にのみ追加することをお勧めします

于 2013-08-27T20:33:25.397 に答える
1

ie10/11 では、marker-start/marker-end 属性を使用すると行が動かないことがわかりました。例でそれらの属性を削除しようとしましたが、動作します。したがって、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 に答える