将 SVG <text> 放置在与 HTML <div> 相同的位置，其中包含文本

Question

我试图将带有文本的 svg 定位在与带有文本的 div 完全相同的位置，无论使用的字体系列或字体大小

问题来自于第一个元素在 x 和 y 位置上的偏移。

我试图将两个元素设置在 top 0 left 0 绝对位置，但它们无法匹配。

当然，手动添加正确的偏移量 x 和 y 是可行的，但我想要一个通用的解决方案。

这是一个示例，如果您运行，文本将无法正确地一个一个地放置在另一个之上。 我正在尝试使这项工作适用于任何字体、任何大小。

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

这里还有一个代码笔https://codepen.io/Cristian-M/pen/VwJzXJv

修改字体大小（变大）并且偏移量越来越明显

有什么想法吗？ 谢谢！

Answer 1

@blaster god，我认为你需要将这两个元素放入包装器中。将包装器设置为相对定位。然后，将两个元素设置为绝对定位，并将 top 和 left 设置为 0。此外，确保 div 的行高与其字体大小相同。对两个元素使用相同的字体大小和字体系列并删除多余的a

第一行 第一行