in svg：translate vs position xとy

Question

rectやlineなどの単純なオブジェクトを配置する場合は、transform属性またはx属性とy属性を使用する必要がありますか？

// this 
d3.selectAll('rect') 
    .attr('x', Number) 
    .attr('y', 0) 

// or this? 
d3.selectAll('rect') 
    .attr("transform", function(d) { return 'translate(' + d + ', 0)' }); 

パフォーマンスの違いは何ですか？

Answer 1

SVG transformでは、ハードウェアアクセラレーションされていません。彼らは（私の経験では）単一の要素についてほぼ同じ性能を持っています。 SVGでないすべての要素がxまたはy属性を持つ、考える...

<line x1="0" y1="0" x2="100" y2="100" /> 
<circle cx="100" cy="100" r="100" /> 
<path d="M 0 0 L 100 100" /> 
<rect x="0" y="0" width="100" height="100" /> 

ので、あなたが使用していない場合は、私の周りのものを移動するtransform以上を使用しますが、これらの要素ごとに異なる実装を記述する必要がありますtransform。あなたが持っている場合transformは確かに高速である一つの領域は、多数の素子を移動さ...

<g transform="translate(100, 100)"> 
    <line x1="0" y1="0" x2="100" y2="100" /> 
    <circle cx="100" cy="100" r="100" /> 
    <path d="M 0 0 L 100 100" /> 
    <rect x="0" y="0" width="100" height="100" /> 
</g> 

それは