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

我正在寻找移动一组SVG元素的最佳方式（更快，更清洁......）。我心目中有三个方面：移动一组SVG元素的最佳方法

做一个循环上的所有元素，对于我们每个人，改变x和y属性
组中的所有元素在SVG元素和改变其x和y属性
组AG元素中的所有elemnts和应用此处介绍的方法：https://stackoverflow.com/a/14036803/2019761

你有一个想法吗？

2013-05-05 Arnaud

我会选择最后一个选项，它环绕元素和移动与'transform'整体，避免过多的 2013-05-09 00:35:25

我最近一直在处理d3.js，在此之前，向组中添加元素并转换组是最佳解决方案。 – wootscootinboogie 2015-06-16 21:31:48

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

开销的一个更重要的来源可能是重绘您所做更改的工作。如果这些更改是针对变换更改的，并且如果变换的值在短时间内多次更改，那么大多数实现都会将变换后的SVG元素的内容绘制到缓存的离屏表面，并将该表面复合，而不是每次重绘。如果元素的内容花费昂贵（比如包含很多子元素或昂贵的过滤器效果），则重新绘制可能比重新绘制要快得多，因此如果您正在动画变换<g>，那么您可以很清楚地看到更好的性能。

来源

2013-05-05 16:21:44 jwatt

谢谢。对不起，我对英语不太了解，但得出的结论是''比' Arnaud 2013-05-05 17:23:09

您可以移动SVG团体或元素的JavaScript

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

来源

2013-05-08 11:04:48

是的，但我在问我列出的三个最佳方法是什么。 – Arnaud 2013-05-08 11:14:34

我认为，更好的办法是将一组元素。

如果你看这个例子，你可以看到不明飞行物被翻译为，并且内部电动机在它内部旋转。（所有移动元素组）

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

来源

2013-05-08 12:43:55

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

回答

相关问题