1

SVG を使用してブラウザーで実行される複雑な GUI を構築しています。SVG には、操作できる多くのオブジェクトがあります。

1 つまたはいくつかのオブジェクトを同時に操作する限り、すべてがスムーズに実行されますが、オブジェクトの大きなグループを移動し始めると、非常に遅くなります。

各属性を変更して SVG 要素を移動します。ブラウザーはDOMが変更されるたびにSVGをレンダリングするため、これは遅いと思います。要素のグループを移動するには、移動する要素の数だけSVGがレンダリングされます。これは正しいです？

私は自分の主張を証明すると思われる実験をしました。移動したいすべての要素を SVG グループにグループ化し、変換属性を変更してこのグループを移動する場合。動きはとてもスムーズです。この場合、SVG DOM を 1 回だけ変更し、SVG は 1 回だけ再レンダリングされます。

問題は、要素が常に同じ方法でグループ化されていないため、この手法を使用できないことです。また、要素を毎回再グループ化すると、不要な複雑さが増すように思えます。

すべてのオブジェクトを移動するまで SVG のレンダリングを延期する方法があるかどうか疑問に思っていましたか?

4

3 に答える 3

1

たぶん、あなたはそれをdomツリーから単に削除し、それが変更された後にそれを再び追加することを試みることができます、例えば：

    <!DOCTYPE html>
<html>
    <script type="text/javascript">
        function change () {
            var mySVG = document.getElementById('mySVG'),
                circle = document.getElementById('myCircle'),
                body = document.body;
            body.removeChild(mySVG);
            circle.setAttribute('cx', '150');
            circle.setAttribute('cy', '100');
            circle.setAttribute('r', '80');
            body.appendChild(mySVG);
        }
    </script>
    <body>
        <button onclick="change();">change</button>
        <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle id="myCircle" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
        </svg>
    </body>
</html>

よろしく、

ベン

于 2012-09-08T19:07:25.640 に答える
1

ブラウザーは DOM への変更を確実に検出しますが、変更ごとに 1 回だけ svg 全体を再レンダリングするわけではなく、すべてレンダリング操作をキュー (バッチアップ) します (通常、レンダリングは、変更を行うスクリプト スニペットの実行が終了した後に行われます)。 ）。変更のたびに何らかのレイアウト/リフロー操作 (基本的にはツリー トラバーサル) がトリガーされ、何をどこに描画するかを判断しても驚かないでしょう。

于 2012-09-09T09:42:05.303 に答える