in svg: translate vs position x and y

d3.js, javascript, svg

Solution

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

Problem

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?

Original source