Javascript 在svg中：相对于位置x和y进行平移

当我想定位简单对象时，例如

rect

或

line

我应该使用

transform

属性还是

x

和

y

属性

//这个
d3.选择全部（'rect'）
.attr（'x'，编号）
.attr（'y'，0）
//还是这个？
d3.选择全部（'rect'）
.attr（“transform”，函数（d）{return'translate（'+d+'，0）}）；

---

性能差异是什么？

在SVG中

转换

不是硬件加速的。根据我的经验，它们对单个元素的性能大致相同。但是，我使用<代码>转换> /代码>更多地移动事物，因为在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强制浏览器使用gpu渲染内容。通过使用transform3d，我观察到android浏览器中存在明显的差异。但是对于其他人来说，性能是一样的。@ParthikGosar您不能

transform3d

SVG中的元素。我支持使用

transform

移动东西的建议。另一个小问题是，它将一个属性改为两个，这通常更好。我知道至少有一个实现可以优化svg中与转换相关的某些内容。你知道使用css转换会获得收益吗？还是相同？我有一个应用程序，可以放大每个鼠标滚轮的鼠标点，它正在重新流动，重新绘制整个视图端口。我正在寻找是否可以通过硬件加速来实现一些优势，将SVG的样式设置为

位置：绝对

似乎既不会导致

transform=“translate（…，…）”

工作，也不会使样式的

顶部

和

左侧

工作。。。将SVG上的

x

和

y

属性作为唯一选项。除非是其他原因导致了我的这种行为。

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