В svg: перевести в положение x и y

Когда я хочу разместить простые объекты, такие как rect или line, следует ли использовать атрибуты transform или 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)' } );

Какова разница в производительности?

Ответ 1

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

Он будет менее интенсивным, чем перемещение каждого элемента отдельно