16

我正在寻找移动一组 SVG 元素的最佳方式（更快、更清洁……）。我想到了三种方法：

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

请问你有什么想法吗？

4

3 回答 3

6

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

于 2013-05-08T11:04:48.530 回答
5

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

如果您查看示例，您会看到 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>
于 2013-05-08T12:43:55.733 回答
4

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

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

于 2013-05-05T16:21:44.447 回答