Vue.js 基于渲染组件大小的定位

我有一个Vue组件，它生成SVG的一部分。 由于SVG中的文本处理很麻烦，我决定在它内部使用

foreignObject

标记，以便让它内部的HTML和CSS处理布局

模板部分基本上如下所示：

<template>
  <g class="port">
    <foreignObject ref="html">
      <div class="port__wrapper" ref="wrapper">
        <div class="port__label">{{ label }}</div>
        <div class="port__content">{{ content }}</div>
      </div>
    </foreignObject>
  </g>
</template>

我使用

created

lifecycle钩子确保组件已创建，并使用

setTimeout

将计算移动到渲染队列的末尾。 当我只是在我的应用程序中移动时，这很好，但是如果我刷新页面，它只在5/6的时间内工作。计算似乎是在最终渲染之前完成的

Safari的一个例子（即使它在所有浏览器中都会出现）：

当我的系统超慢时，我捕捉到了这个。这通常发生在几分之一秒之内

在完全渲染组件之前，此部分可见：

组件占用的空间比最终结果的大小小一点。计算和定位已完成，所有内容均按预期对齐（右侧，垂直居中于中间的十字）

几乎正确，但最后一道漆是这样的：

<template>
  <g class="port">
    <foreignObject ref="html">
      <div class="port__wrapper" ref="wrapper">
        <div class="port__label">{{ label }}</div>
        <div class="port__content">{{ content }}</div>
      </div>
    </foreignObject>
  </g>
</template>

正如您所看到的，由于元素要小得多，并且已经进行了计算，所以定位完全不正确

foreignObject窗台的大小不正确：

（最后一个屏幕截图来自另一个版本，看起来有些不同，但问题仍然存在）

我认为问题可能是字体加载，并尝试在

document.fonts.ready

promise之后执行计算，但这比

setTimeout

方法更不一致

任何可能导致这种情况的提示以及解决方法都将不胜感激