根据渲染组件的大小进行定位

Question

我有一个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>

一切正常，直到我尝试根据计算出的尺寸定位零件。我的foreignObject的大小必须手动设置。为此，我需要计算port__wrapper元素的大小。

这是我目前的做法：

export default {
  methods: {
    calculateAndSetSize() {
      const frame = this.$refs.html;
      const wrapper = this.$refs.wrapper;
      frame.setAttribute('width', `${wrapper.clientWidth}px`);
      frame.setAttribute('height', `${wrapper.clientHeight}px`);
    }
  },
  created() {
    window.setTimeout(() => {
      this.calculateAndSetSize();
      // also some positioning stuff
    }, 0);
  }
}

我使用created生命周期钩子来确保创建组件并使用setTimeout将计算移动到渲染队列的末尾。 当我在我的应用程序中移动时，这可以正常工作，但如果我刷新页面，它只能在5/6的时间内工作。计算似乎是在最终渲染之前完成的。

来自Safari的示例（即使它发生在所有浏览器中）：

我抓住了这个，而我的系统速度非常慢。这通常发生在几分之一秒

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

该组件占用的结果比最终结果大两倍。计算和定位已经发生，一切都按预期对齐（右侧和垂直居中于中间的十字架）。

差不多正确，但是最后的油漆看起来像这样：

正如您所看到的那样，定位完全关闭，因为元素更小并且计算已经完成。

foreignObject sill的大小错误：

（最后一个截图来自另一个版本，看起来有点不同，但问题保持不变）

我认为问题可能是字体加载并尝试在document.fonts.ready承诺之后执行计算，但这比setTimeout方法更不一致。

任何可能导致此问题以及如何解决此问题的提示都将非常感激。