当我想要定位简单对象(例如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)`);
性能差异是什么？
最佳答案
在 SVG 中，变换 不是硬件加速的。它们对于单个元素的性能大致相同(根据我的经验)。但是，我更多地使用 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>
与单独移动每个元素相比，处理强度较小
关于javascript - 在 svg : translate vs position x and y 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15989854/