gpt4 book ai didi

javascript - SVG 的渲染可以推迟到我完成对它的操作吗?

转载 作者:行者123 更新时间:2023-11-30 18:19:54 25 4
gpt4 key购买 nike

我正在构建一个使用 SVG 在浏览器中运行的复杂 GUI。 SVG 有许多可以操作的对象。

只要我同时操纵一个或几个对象,一切都会顺利进行,但是当我开始移动大群对象时,事情就会变得非常缓慢。

我通过更改它们的每个属性来移动 SVG 元素。我认为这很慢,因为每次 DOM 更改时浏览器都会渲染 SVG,因此要移动一组元素,SVG 的渲染次数与要移动的元素的次数一样多。这是正确的吗?

我做了一个实验,我认为可以证明我的观点。如果我将所有要移动的元素分组到一个 SVG 组中,然后通过更改其转换属性来移动该组。移动非常顺利。在这种情况下,我只更改了 SVG DOM 一次,并且 SVG 只重新渲染了一次。

问题是我无法使用此技术,因为元素并非始终以相同的方式分组。每次都重新组合元素似乎增加了很多不必要的复杂性。

我想知道是否有一种方法可以推迟 SVG 的渲染,直到我移动了所有对象?

最佳答案

也许您可以尝试简单地将其从 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>

问候,

关于javascript - SVG 的渲染可以推迟到我完成对它的操作吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12332186/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com