in svg: translate vs position x and y

Question

When I want to position simple objects such as rect or line should I use transform attribute or x and y attributes?

// this
d3.selectAll('rect')
    .attr('x', d => d)
    .attr('y', 0)

// or this?
d3.selectAll('rect')
    .attr("transform", d => `translate(${d}, 0)`);

What is the performance difference?

Answer 1

In SVG transform is not hardware accelerated. They have around the same performance for single elements (in my experience). However, I use transform more to move thing around because in SVG not all elements have a x or y attributes, consider...

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

You must write a different implementation for each of these elements if you are not using transform. One area where transform is indeed faster is moving a large number of elements, if you have...

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

It will be less processing intensive than moving each element individually