SVG组件中foreignObject内部内容对齐异常问题求助

大家好，我最近在开发一个可复用的SVG组件，需求是让组件的使用者能自定义模板内容，并且指定(x,y)坐标，让这些内容精准显示在我的SVG组件的对应位置上。

我选择用<foreignObject>来实现这个需求——它既能帮我轻松定位内容（毕竟根SVG可能会有transform属性修改坐标原点），还支持用户传入非SVG类型的内容，灵活性拉满。为了让用户的内容能在指定的(x,y)点上居中显示，我在<foreignObject>里面嵌套了一个div，给这个div加了如下样式：

div {
  width: min-content;
  height: min-content;
  transform: translate(-50%, -50%);
}

下面是我写的示例代码，特意用了很小的viewbox（0 0 10 10）来方便观察效果：

<svg class="component" viewbox="0 0 10 10" width="200" height="200" overflow="visible" >
  <rect x="0" y="0" width="10" height="10" fill="none" stroke-width="0.1" stroke="black" />
  <!-- 画辅助线标记矩形中心 -->
  <line x1="5" y1="0" x2="5" y2="10" stroke="black" stroke-width="0.1" />
  <line x1="0" y1="5" x2="10" y2="5" stroke="black" stroke-width="0.1" />
  <!-- 用foreignObject将模板定位到指定(x,y)坐标 -->
  <foreignObject x="5" y="5" width="1" height="1" overflow="visible">
    <!-- 通过div应用transform，让内容在(x,y)点居中 -->
    <div>
      <!-- 这里是用户传入的模板示例 -->
      <svg width="2" height="1" overflow="visible">
        <ellipse cx="1" cy="0.5" rx="1" ry="0.5" />
      </svg>
    </div>
  </foreignObject>
</svg>

现在碰到了一个棘手的问题：<foreignObject>内部的内容总是对齐不准，而且当我修改foreignObject的x、y值（比如从(5,5)改成(6,6)）时，错位的情况还会跟着变化。更奇怪的是，浏览器开发者工具里显示的内容 bounding box位置是完全正确的，但实际渲染出来的内容却不在这个位置上。

我已经在Chrome和Firefox里都复现了这个问题，实在找不到原因了，想请教下大家有没有遇到过类似的情况，或者有什么解决思路？

内容来源于stack exchange