含foreignObject的SVG作为img src时Chrome下高度异常问题

Chrome中SVG foreignObject转img后渲染高度不一致的核心原因在于：

• Chrome对作为img资源的SVG采用了不同的布局计算逻辑，尤其是处理非整数宽度、列表默认样式时，会与直接渲染的SVG产生差异
• 浏览器默认的列表样式（如ul的margin、padding）在foreignObject的渲染上下文里未被显式继承，导致高度计算偏差

针对性修复步骤 #

1. 显式重置列表默认样式：消除浏览器user agent样式带来的布局差异
2. 统一尺寸计算逻辑：避免小数宽度引发的像素对齐问题
3. 确保foreignObject与元素尺寸完全匹配：同步元素的实际内容高度而非仅offsetHeight

修改后的完整代码 #

<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      margin: 0
    }

    .x {
      border: 1px solid black;
      float: left;
      width: 100px; /* 改为整数宽度，避免Chrome像素对齐差异 */
    }

    /* 显式重置ul样式，消除默认margin/padding影响 */
    .x ul {
      margin: 0;
      padding-left: 20px;
    }
  </style>
  <script>
    function test() {
      let x = document.getElementById('xx');
      let i = document.getElementById('if');
      i.contentDocument.body.appendChild(document.getElementById('sv').cloneNode(true));
      let c = i.contentDocument;
      let s = c.getElementById('sv');
      let t = c.getElementById('st');
      let f = c.getElementById('fo');
      
      // 用scrollHeight获取元素实际内容高度，而非offsetHeight
      const elementWidth = x.offsetWidth;
      const elementHeight = x.scrollHeight;
      
      i.width = elementWidth * 2;
      i.height = elementHeight;
      
      s.viewBox.baseVal.width = elementWidth;
      s.viewBox.baseVal.height = elementHeight;
      s.width.baseVal.value = elementWidth;
      s.height.baseVal.value = elementHeight;
      
      f.width.baseVal.value = elementWidth;
      f.height.baseVal.value = elementHeight;
      
      t.textContent = document.getElementsByTagName('STYLE')[0].textContent;
      f.appendChild(x.cloneNode(true));
      
      // 序列化前确保SVG命名空间正确，避免Chrome解析问题
      const svgString = new XMLSerializer().serializeToString(s);
      const img = c.createElement('IMG');
      img.width = elementWidth;
      img.height = elementHeight;
      // 替换encodeURIComponent为更兼容的编码方式，避免特殊字符问题
      img.src = 'data:image/svg+xml;charset=utf-8,' + svgString.replace(/#/g, '%23').replace(/"/g, '&quot;');
      
      c.body.appendChild(img);
    }
  </script>
</head>

<body onclick="test()">
  <div class="x" id="xx">
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
    </ul>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" id="sv" viewBox="0 0 100 100" width="100px" height="100px">
    <style id="st"></style>
    <foreignObject id="fo" width="100px" height="100px" style="background:lightgray"></foreignObject>
  </svg>
  <iframe id="if"></iframe>
</body>

</html>

关键修改说明 #

• 将.x的宽度改为整数100px：避免Chrome在img渲染时对小数像素进行取整，导致布局错位
• 显式设置.x ul的margin和padding：消除浏览器默认样式在不同渲染上下文的差异
• 使用scrollHeight替代offsetHeight：获取元素包含内容的实际高度，避免因默认margin导致高度计算不足
• 优化SVG字符串编码：替换#和双引号为URL编码，避免Chrome解析data URI时出现错误

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