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

发布于 2024-12-10 17:15:14 字数 763 浏览 1 评论 0原文

我正在使用 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 符号”并克隆该符号，而不是重新绘制路径数据？或者还有其他可以优化的地方吗？

原文

I am building a visualization using SVG elements.
I'm having some performance issues and I'm wondering if there's anything I could do to speed up the rendering?

What I want to draw initially is several rows (~10) of grouped symbols (~15-25 per row):

<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 ...]

When dragging a timeslider I'd like to move the rows vertically and add / remove symbols from the various row groups.

Is there a way to, for example, reference 1 "svg:g symbol" and clone that one instead of redrawing the path data? Or are there other optimizations that can be made?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖不如嘢 2024-12-17 17:15:14

有一个 use 元素 ...
所以你可以给 ... 一个像 ...< /代码>, 当您添加另一个 ... 时，添加一个 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);

There is an use element <use href="#idofyourclonegroup">...
so you can give the <g class="symbol">... an id like <g class="symbol" id="g1">...,
and when you add another one ... add an use element like this:

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

回复收藏 0 原文

~没有更多了~