Performance Ipad上的SVG性能不好

我正在使用D3.js渲染3000个SVG圆。D3.js工作得很好，但是你需要用鼠标移动它们。在我的Safari桌面上效果很好，但是，当我在Ipad上渲染它们时。。。好吧，从15 FPS下降到2/1 FPS

如果我只渲染500个圆。。。钢铁贫乏。有什么方法可以让你的表现更好吗

我使用以下方法移动它们：

var diff = this.lastClientX - getD3MousePosition().X;
            if(isNumber(diff)){
                this.XLines.forEach(function(line){
                    line.attr("x1",parseFloat(line.attr("x1")) - diff);
                    line.attr("x2",parseFloat(line.attr("x2")) - diff);
                })
            }
            this.lastClientX = getD3MousePosition().X;

• Diff只是一个变量，用于获取最后一次鼠标移动
• getD3MousePosition（）提供mouseX和mouseY位置
• 这个.Xlines具有对每个SVG循环的jquery引用，这些引用在D.js呈现它们之后从中收集

基本上，我想在Ipad上以流畅的方式移动3000个SVG圆圈

---

谢谢

尝试CSS3转换。您可以使用CSS3转换转换点，而不是更改SVG位置属性。这在iPad上可能会更流畅

---

如果这还不够好：您可以尝试使用HTML5画布而不是SVG来获得更好的渲染性能。D3支持画布渲染。

这里有一个代码exmaple：我不知道你是否能更快地实现这一点，但有一件事，我会通过将line.attr转换为line[0][0].getAttribute（）来使用原生DOM方法，以避免使用D3函数。或者使用svg

transform

属性来移动对象。但触摸3000个属性仍然不是最佳选择，因此如果不需要单独移动，请尝试将变换应用于一组圆。