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的渲染可以推迟到我完成操纵它吗？

回答

相关问题