SVG文本元素导致布局混乱

Question

我在网页上放置了大量的svg文本元素，使用off-set变量更改时，文本内容在滚动时使用vue.js动态更新（请参见下面的代码）。此更新导致布局崩溃，而我无法解决。我所有的元素都使用CSS进行了绝对定位和调整大小。如何防止布局重新计算？

我试图将text-rendering属性设置为optimiseSpeed。我尝试将可见性设置为隐藏并通过javascript修改每个文本元素的文本节点，然后将可见性设置回可见，但仍然会导致布局崩溃。我还尝试将textLength设置为固定大小。

<svg class=svg :viewBox="viewBox" preserveAspectRatio="none">
   <g text-anchor="end">
      <text v-for="index in tickCount" :key=index  width=2 height=1
            :x="width/2"
            :y="index + 1"
            >{{index + offSet}}m</text>
   </g>
</svg>

Chrome性能工具显示布局需要花费大量时间，并使FPS降至<30。