Question

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

对所有元素进行循环，并为我们每个人更改x和y属性
对svg元素中的所有元素进行分组并更改其x和y属性
对g元素中的所有元素进行分组，并应用此处描述的方法：https://stackoverflow.com/a/14036803/2019761

请问您有什么想法吗？

Answer 1

您可以使用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 );

}

在行动中看到它：

http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/examples_EN.php?exampleName=ufo_animation_EN

Answer 2

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

如果您查看示例，您可以看到ufo已翻译内部电机在其内部旋转。（所有移动的元素都是组）

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

Answer 3

与DOM方法交互涉及JS＆lt; - ＆gt;本机代码开销。浏览器实施者一直在努力减少这种开销，但它永远不会是免费的。如果你正在做很多事情，比如在很多元素上设置x和y，你可能会开始看到显着的性能影响。在这种情况下，在<svg>或<g>容器上设置一次位置属性可能会有所帮助。

更重要的开销来源可能是重新绘制所做更改的工作。如果这些更改用于转换更改，并且转换的值在短时间内多次更改，则大多数实现会将转换后的SVG元素的内容绘制到缓存的屏幕外表面并复合该表面而不是每次重新绘制。如果元素的内容绘制成本很高（比如它包含很多孩子，或者昂贵的滤镜效果），那么重新组合比重新绘制要快得多，所以如果你要动画<g>的变换，那么你可以看到更好的表现。

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

3 个答案: