为什么Chrome检查器为SVG中的相同尺寸的元素显示不同的尺寸？

2024-06-02 • 问答

在以下代码段中，Chrome浏览器检查器报告div和foreignObject比rect和text节点大50％，即使它们都占用相同的空间屏幕。 Firefox报告这四个大小都相同。是什么导致Chrome报告差异？

<svg viewBox="0 0 300 100" style="width: 300px; height: 100px;">
 <rect fill="#f5f5a0" width="244" height="73"></rect>
 <foreignObject width="244" height="73">
  <div>
   Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus efficitur quam sapien,in varius ipsum mollis quis.
  </div>
 </foreignObject>
</svg>

Chrome检查器结果：