javascript - 在 svg 中：平移与位置 x 和 y

Question

当我想定位简单的对象时，例如rect或者line应该使用transform属性还是x和y属性？

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

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

性能差异是什么？

Answer 1

在 SVGtransform中不是硬件加速的。对于单个元素，它们的性能大致相同（根据我的经验）。但是，我使用transform更多来移动事物，因为在 SVG 中并非所有元素都具有xory属性，请考虑...

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

与单独移动每个元素相比，它的处理强度要小