w svg: translate vs position x i y

Question

Kiedy chcę ustawić proste obiekty, takie jak rect lub line, czy powinienem użyć atrybutów transform lub x i y?

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

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

Jaka jest różnica w wydajności?

Answer 1

W SVG transform nie jest przyspieszane sprzętowo. Mają mniej więcej taką samą wydajność dla pojedynczych elementów (z mojego doświadczenia). Jednakże, używam transform więcej, aby przenieść rzeczy wokół, ponieważ w SVG nie wszystkie elementy mają x lub y atrybuty, należy rozważ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" /> 

Musisz napisać inną implementację każdego z tych elementów, jeśli nie używasz transform. Jednym z obszarów, gdzie transform jest rzeczywiście szybciej porusza się wiele elementów, jeśli masz ...

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

To będzie mniej intensywny niż przetwarzanie porusza każdego elementu indywidualnie