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符号”并克隆那个而不是重绘路径数据？或者是否可以进行其他优化？

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);

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

1 个答案: