SVG的渲染可以推遲到我完成操縱它嗎？

我正在構建一個使用SVG在瀏覽器中運行的複雜GUI。 SVG有許多可以被操縱的對象。SVG的渲染可以推遲到我完成操縱它嗎？

只要我在同一時間操縱一個或幾個對象一切都平穩運行，但是當我開始移動大組對象時，事情開始變得非常緩慢。

我通過更改每個屬性來移動SVG元素。我認爲這很慢，因爲瀏覽器在每次更改DOM時都會呈現SVG，所以要移動一組元素以使SVG得到渲染的次數與要移動的元素的次數相同。它是否正確？

我做了一個我認爲證明了我的觀點的實驗。如果我將所有要移動到SVG組中的元素進行分組，然後通過更改其變換屬性來移動該組。此舉非常順利。在這種情況下，我只更改SVG DOM一次，SVG只重新渲染一次。

問題是我不能使用這種技術，因爲元素沒有一直以相同的方式分組。每次重新組合元素似乎都增加了許多不必要的複雜性。

我想知道是否有方法推遲SVG的渲染，直到我移動所有的對象？

來源

2012-09-08 Karel

歡迎來到SO。請包括您使用的代碼和工作演示，例如http://jsfiddle.net。 –

也許你可以試試簡單地從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-08 19:07:25 benbai123

從描述你的問題聽起來像一個拖放界面，您可以選擇多個元素並移動它們。它可能不會拖拽，但原理以相同的方式運作。你有三個事件，啓動，移動和結束，在拖放它看起來LIK這樣的：

start = function(e) { 
    //capture the initial position 
} 

move = function(e) { 
    //change the x and y attributes or transform attr 
} 

end = function(e) { 
    //finish up 
} 

svg.addEventListener("mousedown", start) 
svg.addEventListener("mousemove", move) 
svg.addEventListener("mouseup", end)

現在，如果你只是想改變你的結束動作的屬性，你會怎麼做：

start = function(e) { 
    //capture the initial position 
} 

end = function(e) { 
    //change the x and y attributes or transform attr 
    //finish up 
} 

svg.addEventListener("mousedown", start) 
svg.addEventListener("mouseup", end)

因此，在這種情況下，事件僅在兩次觸發，一次當您按下鼠標按鈕，第二次釋放時觸發。

來源

2012-09-08 19:24:39 Duopixel

瀏覽器確實檢測到DOM的變化，但是每次更改都不會重新呈現整個svg，它們都會對渲染操作進行排隊（通常會在腳本代碼片段執行後進行一段時間渲染）修改已經完成執行）。如果每次更改觸發某種佈局/迴流操作（基本上遍歷樹），我都不會感到驚訝，要弄清楚什麼和在哪裏繪製。

來源

2012-09-09 09:42:05

SVG的渲染可以推遲到我完成操縱它嗎？

回答

相關問題