javascript - 旋转图像的 SVG 低性能

Question

我正在 D3.js 中构建一个应用程序，我将多个索引卡 (svg) 渲染为一个 SVG。用户应该能够旋转这些卡片。出于测试目的，我使用拖动行为进行旋转

dragListener = d3.behavior.drag().on("dragstart", function(d){
        originX = parseInt(d3.select(this).select("image").attr("x"));
        originY = parseInt(d3.select(this).select("image").attr("y"));
    })
    .on("drag", function(d){
        counter++;
        if(counter > 360){
            counter = 0;
        }
        d3.select(this).attr("transform", 
            "rotate("+counter.toString()+","+(originX+150).toString()+","+(originY+90).toString()+")");
    });

我提供给所有索引卡

var grp = svg.selectAll("g").data(arr);
var card = 
       grp.enter().append("g")
     //.attr("transform", function(d){ return "rotate(30,"+(d.x+150)+","+(d.y+90)+")";})
       .call(dragListener);
card.append("svg:image")
    .attr("xlink:href", "http://images.clipartlogo.com/files/images/22/227702/index-card_p")
    .attr("x", function(d){return d.x;})
    .attr("y", function(d){return d.y;})
    .attr("width", "300")
    .attr("height", "180");

问题是，已经旋转的卡片越多，用户旋转卡片时的性能就越低。当所有卡片旋转时，Chrome 中的 FPS 约为 8。
这是示例:http://jsfiddle.net/45hdjkk0/6/
您可以通过删除第 32 行中的评论来为所有卡片提供初始轮换。

我是做错了什么还是选择了错误的方法？

更新: 在 Internet Explorer 和 Firefox 上测试相同的示例后，我发现 Internet Explorer 是这三个中最快的。与 Chrome 相比，Firefox 也非常快。这是 Chrome 的问题吗？

Answer 1

旋转任何位图的计算量很大。我在 Firefox 和 Chrome 中运行了你的 fiddle 。虽然 Firefox 还不错，但我确实看到你提到的 Chrome 中的一些帧速率下降。一定要是png可能没有好的解决办法。如果它不一定是 png，旋转由组合图形元素组成的 svg 将获得出色的性能。

编辑:看起来您确实想要旋转索引卡，所以我认为您很幸运。为了说明我在说什么，请注释掉第 36 行，然后取消注释第 32 行。然后查看没有位图的旋转性能。然后只需添加几行 .attr("path", ...) 即可重现您的索引卡，我敢打赌性能会很出色。