使用嵌套組提高SVG動畫性能

Question

我使用SVG元素構建可視化。 我有一些性能問題，我想知道是否有什麼我可以做，以加快渲染？

我想最初是畫幾排（約10）分組符號（〜每行15-25）：

<g class="row"> 
    <g class="symbol"> 
    <path class="fill" d="..." /> 
    <path class="fill" d="..." /> 
    <path class="fill" d="..." /> 
    </g> 
    <g class="symbol"> 
    <path class="fill" d="..." /> 
    <path class="fill" d="..." /> 
    <path class="fill" d="..." /> 
    </g> 
    <g class="symbol"> 
    <path class="fill" d="..." /> 
    <path class="fill" d="..." /> 
    <path class="fill" d="..." /> 
    </g> 
</g> 
[another row ...] 

當拖動時間滑，我想垂直移動行添加/刪除各行組中的符號。

有沒有辦法，例如，引用1「svg：g symbol」並克隆那個而不是重繪路徑數據？還是有其他優化可以做？

Answer 1

有一個use元素<use href="#idofyourclonegroup">... 這樣你就可以給<g class="symbol">...像<g class="symbol" id="g1">...， 一個id，當您添加另一個...添加use元素是這樣的：

var svgns = "http://www.w3.org/2000/svg"; 

var xlinkns = "http://www.w3.org/1999/xlink"; 

var use = document.createElementNS(svgns, 'use'); 
use.setAttributeNS(xlinkns, 'href', '#g1'); 

[someparentelement].appendChild(use);