使用嵌套组提高 SVG 动画性能答案

【问题标题】：Improving SVG animation performance with nested groups使用嵌套组提高 SVG 动画性能
【发布时间】：2011-12-11 17:52:12
【问题描述】：

我正在使用 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" 并克隆那个而不是重绘路径数据？还是可以进行其他优化？

【问题讨论】：

标签： javascript performance animation svg

【解决方案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);

【讨论】：