3

おそらく複雑なSVGのダブルバッファリングをシミュレートするより良い方法は何でしょうか。変更された SVG を頻繁にリロードしていますが、ロードの遅延を解消したいと考えています。2 つの重複した DIV を使用し、onLoad 後に可視性を切り替えることを考えていました。より良い代替手段はありますか?

編集

これで、スタイル表示の切り替え (ブロック/なし) を使用して、重複する DIV に 2 つの SVG インスタンスを実装しました。FF ではほとんど機能しました (スムーズでスムーズなモーフィング、最初の表示だけで領域が縮小されました) が、Chrome は、形状の位置を同期するために必要な ScreenCTM 変換を取得することを拒否します。これらの問題 (FF で部分領域がレンダリングされる、Chrome でレンダリングされない) が関連していると思います。現在、代わりに visibility:hidden を試しています。

編集

可視性を切り替えると、許容できる結果が得られます。これまでご協力いただきありがとうございました。

編集

問題が見つかったので、ここでもう一度助けてください: SVG に関連しない UI に Boostrap を使用していますが、ツールバーの動作が非常に奇妙です: 2^ DIV (最初は非表示) の可視性を切り替えたとき、イベントがツールバーに到着します。再び 1^ に切り替えると、イベントは問題ありません。

position:absolute または position:fixed の使用は同じであり (もちろん、イベントの問題の場合)、top:0 が「原因」であることがわかりました。0 より大きい任意の値を使用すると、イベントが流れますが、DIV は非表示になります。したがって、最初の質問は理にかなっています: 可視性を切り替えるよりも良い方法はありますか? またはhtml構造のヒント?現在、私のHTMLは次のようになっています

<div class="row-fluid" style="height:800px;background-color:cyan">
<div id="flowchart" style="visibility:visible;width:100%;height:100%"></div>
<div id="flowchart_x" style="visibility:hidden;width:100%;height:100%;position:absolute;top:0"></div>
</div>
4

0 に答える 0