Улучшение производительности 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">..., и когда вы добавите еще один ..., добавьте 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);