移動一組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元素的最佳方法

回答

相關問題