如何让SVG <text>与HTML <div>文本实现精准同位置显示？

问题描述 #

需要让SVG中的<text>元素与HTML包含文本的<div>始终处于完全相同的位置，无论使用何种字体或字号。将两者设为top:0、left:0的绝对定位后，仍存在XY方向的偏移；手动调整偏移量虽可行，但需要通用解决方案。示例代码运行后文本无法完全重合，且字号越大偏移越明显。

核心原因与解决思路 #

偏移的根源是HTML文本和SVG文本的基线对齐规则、行内布局默认属性存在差异，具体解决要点如下：

• 统一文本渲染核心属性：确保两者的font-family、font-size、font-weight完全一致；HTML的<div>清除默认margin、padding，并设置line-height与font-size相等，避免行高额外占用空间。
• 修正SVG文本对齐基准：SVG的<text>默认对齐规则与HTML不同，需设置dominant-baseline: text-before-edge替代hanging，同时保留text-anchor: start，确保水平起点对齐。
• 消除SVG容器额外空间：将SVG的width设为auto（自适应文本宽度），height设为与HTML文本行高一致的值，避免容器尺寸限制导致偏移。

修正后的代码示例 #

<div style="position:absolute; color:red; font-family:Verdana; font-size:20px; 
            margin:0; padding:0; left:0; top:0; line-height:20px;">
  First Line
</div>
<div style="position:absolute; top:0; left:0; background:transparent;"> 
  <svg width="auto" height="20" xmlns="http://www.w3.org/2000/svg">
    <text x="0" y="0" font-family="Verdana" text-anchor="start" 
          dominant-baseline="text-before-edge" font-size="20" fill="black">First Line</text>
  </svg>
</div>

关键细节说明 #

• HTML的<div>必须设置line-height等于font-size，否则HTML文本会基于行高的基线对齐，与SVG的基准产生偏差。
• SVG的dominant-baseline: text-before-edge会让文本顶部与指定的y坐标完全对齐，和HTML文本的顶部对齐规则匹配。
• SVG的width设为auto可自适应文本宽度，避免固定宽度导致的潜在排版问题。

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