in svg：translate與位置x和y

當我想定位簡單對象，如rect或line應該使用transform屬性還是x和y屬性？in svg：translate與位置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)' });

性能有什麼區別？

來源

2013-04-13 oluckyman

據說變換強制瀏覽器使用GPU來渲染東西。我通過使用transform3d觀察了Android瀏覽器的顯着差異。但與其他人一樣，表現也一樣。 –

@ParthikGosar你不能在SVG中使用'transform3d'元素。 – Duopixel

在SVG transform沒有硬件加速。他們對單個元素具有相同的性能（以我的經驗）。但是，我用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的確是更快的移動大量的元素，如果你有...

<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>

這將是更少的處理密集的不是移動的每個元素單獨

來源

2013-04-13 20:28:06 Duopixel

我第二次推薦使用'transform'來移動東西。另一個小問題是它將一個屬性修改爲兩個，這在一般情況下更好。我知道至少有一個實現可以優化某些與svg中的轉換有關的事情。 –

任何想法，如果使用CSS變換將獲取增益還是相同？我有一個應用程序，我放大鼠標點，爲每個鼠標滾輪，它正在重新流動，重新繪製整個視圖端口。我正在尋找能否通過硬件加速獲得一些優勢， – themanwhosoldtheworld

in svg：translate與位置x和y

回答

相關問題