SVG中foreignObject作为img src使用时行高显示不一致问题求助

我有一个包含foreignObject文本内容的SVG，想要转换为HTML的img元素（格式为<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns...">），但生成的图片与原SVG显示存在差异，图片的行高明显更大。尝试更换不同字体后，仍无法让两者显示一致。

代码示例 #

HTML代码

<div id="svg"></div>

CSS代码

svg p {
  color: red;
}

svg, img {
  position: absolute;
  left: 10px
}

JS代码

const svgString = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160"
  height="143">
  <foreignObject width="100%" height="100%"
    style="line-height: normal; letter-spacing:0.25px; font-style:normal; font-weight:normal; color:#000000; font-size:11pt; text-decoration:none; text-align:left;font-kerning:auto;overflow-wrap:break-word;padding:10px;width:160px;height:143px;">
    <style>
      p {
        margin-top: 0px;
        margin-bottom: 0px;
      }
    </style>
    <div xmlns="http://www.w3.org/1999/xhtml" style="">
      <p><span style="font-family: Arial Narrow;">Hello World</span></p>
      <p><span style="font-family: Arial Narrow;">Hello World</span></p>
      <p><span style="font-family: Arial Narrow;">Hello World</span></p>
      <p><span style="font-family: Arial Narrow;">Hello World</span></p>
      <p><span style="font-family: Arial Narrow;">Hello World</span></p>
      <p><span style="font-family: Arial Narrow;">Hello World</span></p>
    </div>
  </foreignObject>
</svg>`
document.getElementById('svg').innerHTML = svgString;

const data = 'data:image/svg+xml;utf8,' + encodeURIComponent(svgString);

const img = document.createElement('img');
img.src = data;

document.getElementById('svg').appendChild(img);

问题现象 #

该问题仅在Chrome macOS环境下存在，Firefox中两者显示完全一致。从对比效果来看，原SVG（设为红色便于区分）的行高比生成的img图片（黑色）更小。

兼容解决方案 #

针对Chrome macOS的这个渲染差异，可以尝试以下几种方案：

• 明确指定行高数值而非使用normal
  将foreignObject的line-height: normal替换为具体的像素值，比如根据字体大小设置line-height: 14px（对应11pt字体），强制统一行高计算规则：

  /* 修改foreignObject的style */
  style="line-height: 14px; letter-spacing:0.25px; ..."
  

• 调整img元素的缩放比例
  利用Chrome的设备像素比差异，给img元素添加缩放样式，抵消渲染偏差：

  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    img {
      transform: scale(1 / window.devicePixelRatio);
      transform-origin: top left;
    }
  }
  

  或者直接通过JS动态设置：

  if (navigator.userAgent.includes('Mac') && navigator.userAgent.includes('Chrome')) {
    img.style.transform = `scale(${1 / window.devicePixelRatio})`;
    img.style.transformOrigin = 'top left';
  }
  

• 使用SVG内部的CSS强制统一排版
  在foreignObject的style标签中，给p元素也明确指定行高，避免浏览器默认样式干扰：

  /* 修改SVG内部的style */
  <style>
    p {
      margin: 0;
      line-height: inherit; /* 或者具体数值 */
    }
  </style>
  

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