Question

当我想定位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)' } );

性能差异是什么？

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

与单独移动每个元素相比，处理密集程度更低

在svg中：translate vs position x和y

1 个答案: