Safari中foreignObject父元素的SVG transform属性失效求助

问题说明 #

在Safari浏览器中，<foreignObject>的父元素（如<g>）上设置的transform属性无法生效。由于业务场景必须使用HTML元素，只能依赖<foreignObject>，但目前仅能找到用<rect>这类原生SVG元素替代的方案，不符合需求，特此寻求可行解决办法。

效果差异展示 #

Firefox/Chrome与Safari的渲染效果对比：

复现代码 #

CSS代码 #

svg {
  height: 200px;
  background: red;
}

.square {
  width: 25px;
  height: 25px;
  background: green;
  transform: translate(12.5px, 12.5px);
}

HTML代码 #

<!-- 预期的正确效果示例 -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(-25, -25) scale(2)">
    <rect width="25" height="25" x="12.5" y="12.5" fill="blue" />
  </g>
</svg>

<!-- Safari中失效的代码，视觉效果应与上方一致 -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(-25, -25) scale(2)">
    <foreignObject x="0" y="0" width="100" height="100">
      <div class="square"></div>
    </foreignObject>
  </g>
</svg>

可行解决办法 #

方案1：将transform直接应用到内部HTML元素 #

把父元素的transform逻辑迁移到<foreignObject>内部的HTML元素上，通过CSS组合原有transform和父元素的transform：

.square {
  width: 25px;
  height: 25px;
  background: green;
  /* 合并原有translate与父元素的transform，注意顺序 */
  transform: translate(12.5px, 12.5px) scale(2) translate(-25px, -25px);
}

同时移除父<g>的transform属性：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g>
    <foreignObject x="0" y="0" width="100" height="100">
      <div class="square"></div>
    </foreignObject>
  </g>
</svg>

方案2：将transform直接设置在foreignObject上 #

Safari对<foreignObject>自身的transform支持更完善，直接把transform属性移到<foreignObject>标签上：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g>
    <foreignObject x="0" y="0" width="100" height="100" transform="translate(-25, -25) scale(2)">
      <div class="square"></div>
    </foreignObject>
  </g>
</svg>

注意：如果transform包含缩放，可能需要调整<foreignObject>的宽高，避免内部HTML内容被裁剪。

方案3：用CSS变量统一管理transform参数 #

如果需要在多处复用transform值，用CSS变量维护，方便同步修改：

:root {
  --parent-transform: translate(-25px, -25px) scale(2);
}

.square {
  width: 25px;
  height: 25px;
  background: green;
  transform: translate(12.5px, 12.5px) var(--parent-transform);
}

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