Javascript 屏幕上的大量路径使得iPhone上的工具提示速度变慢

我正在使用路径在d3图表中绘制21*9的风倒钩。 示例路径如下所示：

<path marker-start="url(#meteo-barbheadLight)" stroke="black" stroke-width="0.5" class="meteo-aloft-barb meteo-aloft-barb-group-0 moderate" d="M1 2 L8 2 M0 0 L1 2 Z" transform="translate(0, 225.64285714285714) scale(1.875), rotate(339.35300899956496, 0, 0), translate(-4, -2)" style="opacity: 0.2;"></path>

这在桌面web浏览器上运行良好。但当我在iOS safari上运行它时。由于某些原因，工具提示趋势线性能变得非常差

我不确定是什么导致了这个问题。我甚至试图从趋势线工具提示功能中分离出这些倒钩，但仍然很慢。如果我不画这些倒钩，那么工具提示就相当流畅了

所以问题是：

1） 那个些21*9的倒钩是否让页面变得如此沉重，以至于工具提示在移动浏览器上出现滞后

2） 有什么更好的方法可以做到这一点

应用程序URL:

---

更好的方法是在画布中绘制所有路径，而不是SVG，或者使用canvg库将这些路径导出到画布，然后删除SVG路径容器元素。画布比SVG轻得多

另外，一个技巧是使用显示：无而不是不透明度来提高性能