trong svg: dịch vs vị trí x và y

Question

Khi tôi muốn vị trí của đối tượng đơn giản như rect hoặc line tôi nên sử dụng transform thuộc tính hoặc x và y thuộc tính?

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

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

Sự khác biệt về hiệu suất là gì?

Answer 1

Trong SVG transform không được tăng tốc phần cứng. Chúng có hiệu suất tương tự cho các phần tử đơn lẻ (theo kinh nghiệm của tôi). Tuy nhiên, tôi sử dụng transform hơn để di chuyển thứ xung quanh bởi vì trong SVG không phải tất cả các yếu tố có một x hoặc y thuộc tính, hãy xem xét ...

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

Bạn phải viết một thực hiện khác nhau cho mỗi người trong số những yếu tố này nếu bạn không sử dụng transform. Một lĩnh vực mà transform thực sự nhanh hơn là được di chuyển một số lượng lớn các yếu tố, nếu bạn có ...

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

Nó sẽ ít chế biến sâu hơn di chuyển từng yếu tố riêng lẻ