0

我的页面上有几个 SVG，可能最多 10-15 个。它们并不是特别复杂，一个路径示例可能如下：

<path d="M79.7315 149.8506 a248.48549470442975 248.48549470442975 0 0 0 462.2685 -51.850599999999986a229.28617885359205 229.28617885359205 0 0 1 -427.2987 40.6302M79.7315 149.8506 a75 75 0 1 1 34.969800000000006 -11.220399999999984"></path>

它基本上是一个讲话泡泡，它会从某人的嘴里发出，所以实际上只有几条弧线，也许是一些线条，而有些我见过它什么都没有。

但是在我的页面上，当鼠标移动时，路径会更新（它们会发生显着变化，但形状仍然相同，因此路径不会更大）。当这种情况发生在 Ipad 等移动设备上并且页面上有 3 个以上的设备时，我可以注意到显着的性能下降。

我认为这取决于我获得新路径的计算，但是我使用了 chrome 工具（性能选项卡），似乎我设置该属性的贡献相当大。所以我的问题...

当鼠标移动它做一个

element.attr("d", newPath);

如前所述，这可能发生在 15 个单独的 svg 上。

有没有更有效的方法来设置路径？有没有一种方法可以设置每个路径，但只调用一次重绘/更新？

非常感谢

4

1 回答 1

0

您是否使用 Javascript 对此进行动画处理？如果你想要真正流畅的动画，你可以试试 CSS 动画。除非您有一个极其复杂的动作，否则您应该能够只设置开始和结束属性，并且它会平滑地制作动画（使用您选择的缓动功能）。网上有很多教程，这里有一个：https ://thoughtbot.com/blog/css-animation-for-beginners

于 2019-08-10T20:24:37.820 回答