SVG中带position属性的foreignObject在Safari中无法随视图缩放

问题现象 #

在Safari浏览器中，包含<foreignObject>的交互式SVG里，若foreignObject或其子元素设置了position: relative/absolute，该元素会固定在viewBox的原始尺寸位置，无法随SVG一同缩放，甚至可能因超出视图范围消失，但SVG内其他元素可正常适配视图变化。

解决方案 #

方案1：替换定位布局（推荐） #

避免在foreignObject及其子元素中使用position: relative/absolute，改用Flexbox或Grid布局实现定位需求，从根源上避开Safari的渲染bug。

修改后代码示例：

<svg viewBox="0 0 1000 600" width="100%" height="auto">
  <rect width="100%" height="100%" fill="#eee" />
  <foreignObject x="100" y="100" width="800" height="400">
    <div style="display: flex; width: 100%; height: 100%; padding: 20px;">
      <p>这是测试文本</p>
    </div>
  </foreignObject>
</svg>

方案2：添加transform触发重绘 #

若必须使用定位属性，给包含position的元素添加transform: translate(0, 0)，强制Safari重新计算元素的变换矩阵，使其跟随SVG缩放。

修改后代码示例：

<svg viewBox="0 0 1000 600" width="100%" height="auto">
  <rect width="100%" height="100%" fill="#eee" />
  <foreignObject x="100" y="100" width="800" height="400">
    <div style="position: relative; width: 100%; height: 100%; transform: translate(0, 0);">
      <p style="position: absolute; top: 20px; left: 20px;">这是测试文本</p>
    </div>
  </foreignObject>
</svg>

问题原因 #

Safari对SVG内foreignObject的定位处理存在兼容性缺陷：当元素设置position属性时，没有正确继承SVG的缩放变换上下文，导致元素位置计算基于viewBox的原始尺寸，而非SVG缩放后的实际视图尺寸。添加transform: translate(0,0)可触发浏览器的重绘机制，强制重新计算元素的变换关系；替换定位布局则直接绕过了该bug的触发条件。

内容的提问来源于stack exchange，提问作者Smeagol2