移动一组SVG元素的最佳方法

我正在寻找移动一组SVG元素的最佳方式（更快、更干净…）。我有三个想法：

• 对所有元素执行循环，并为我们每个人更改x和y属性
• 将svg元素中的所有元素分组并更改其x和y属性
• 将g元素中的所有元素分组，并应用此处描述的方法：

---

您有什么想法吗？

与DOM方法交互涉及JS本机代码开销。浏览器实现者一直在努力减少这种开销，但它永远不会是免费的。如果你做了很多工作，比如在很多元素上设置x和y，你可能会开始看到显著的性能影响。在这种情况下，仅在

或

容器上设置一次位置属性可能会有所帮助

---

更重要的开销来源可能是为所做的更改重新绘制的工作。如果这些更改用于转换更改，并且如果转换的值在短时间内多次更改，那么大多数实现都会将转换后的SVG元素的内容绘制到缓存的屏幕外表面，并合成该表面，而不是每次重新绘制。如果元素内容的绘制成本很高（比如它包含很多子元素或昂贵的过滤效果），那么重新组合比重新绘制要快得多，因此如果您正在为

的转换设置动画，那么您可以看到更好的性能。

您可以使用javascript移动svg组或元素

// translate svg element
function translate( _element , _x , _y )
{
  var transform = _element.transform.baseVal.getItem(0);   
  var mat = transform.matrix;   

  mat = mat.translate( _x, _y );  
  transform.setMatrix( mat );

}

在行动中看到它：

---

我认为更好的方法是移动一组元素

如果你看这个例子，你会发现ufo被翻译了 内部电机在其内部旋转。 （所有移动的图元都是组）

谢谢。对不起，我不太懂英语，但结论是

比

好，或者两者相等？是的，但我想问的是，在我列出的三种方法中，最好的方法是什么。我选择了最后一个选项，将其环绕在元素周围，并使用

变换移动整个元素，避免太多，因为它可能会变得相当复杂的相似或在每个（即：太容易混淆他们）我最近一直在处理d3.js，我也在这之前添加元素到一个组和转换组是最好的解决方案。
<g xmlns="http://www.w3.org/2000/svg" transform="matrix(1 0 0 1 -12.5067 69.4101)" id="ufo">
    <g transform="matrix(1 0 0 1 0 -2.842170943040401e-14)">
        <path transform="matrix(1 0 0 1 21.6 2.8)" width="92.34371368613222" height="91.4899957511011" stroke-width="0.83" stroke-miterlimit="3" stroke="none" fill="url(#_1_)" d="M46.1,0 C71.67,0 92… "/>     
    </g>
    <g transform="matrix(0.5 0.86 -0.86 0.5 74.6 24.1)" id="motor">
        <path transform="matrix(1 0 0 1 9.7 -2.2)" width="13.11" height="13.5849" stroke-width="0.88" stroke-miterlimit="3" stroke="none" fill="url(#_4_)" d="M6.55,2.8… "/>        
    </g>
</g>