如何将位置为“相对”的 div 放在一个 foreignObject 内部和 svg 中，并在 safari 上进行定位工作？

Question

<svg id='rootSvg' width='100%' height='100%'>
    <g id='rootGroup' transform={'translate(100, 100)'}>
        <foreignObject  width='100px' height='100px'>
            <div class='relative'>some word</div>
        </foreignObject>
    </g>
</svg>

正如你在图像中看到的那样，即使组与外部对象一起平移，div 也不会跟随并且它会从根 svg 中占据位置。我到处搜索并尝试了几个小时来解决这个问题，有些人说这是 safari 中的一个已知问题，但有没有解决方法。我需要在基本 div 中使用 relative，所以我不能使用 fixed 作为解决方法，因为我正在构建的应用程序中的 div 内容需要缩放

我尝试使用带有相对位置的 div 的外部对象，它没有按预期工作，div 是相对于 svg