如何使 svg 文本和絕對定位的 html 文本相同？

Question

我的絕對位置 div 上/左設置為 10, 10 並且我將 svg 元素絕對定位在 0, 0 和文本元素在 10, 10。我如何設置兩者的樣式，使它們看起來完全相同？ （即它在視覺上應該看起來像單個文本行）我已經應用了dominant-baseline: hanging svg 文本，它正確地將其准確定位在我想要的位置，但頂部的 html 文本有一些小的邊距。 是否可以刪除它？ 我可以通過設置line-height: 0.8來實現所需的行為，但我想找到合適的解決方案。

 .html-text { color: blue; position: absolute; top: 10px; left: 10px; font-family: Arial; font-size: 36px; vertical-align: middle; line-height: 1; } svg { position: absolute; top: 0px; left: 0px; font-family: Arial; font-size: 36px; transform-origin: 0 0; dominant-baseline: hanging; }

 <div> <svg> <text x="10" y="10">Hello world!</text> <rect x="10px" y="10px" width="220px" height="40px" fill="green" opacity="0.1"/> </svg> <div class="html-text">Hello world!</div> </div>

Answer 1

這是我發現的一種解決方案，它使用line-height並在類中保持top和left屬性相同： https : //jsfiddle.net/yobwhv16/44/

唯一變化的值是在tspan dy位置，您必須將第一行偏移2px然后在此之后的每一行偏移您對line-height的值

HTML

<div>
 <svg>
  <text>
 <tspan x="0" dy="2px">Hello world!</tspan>
 <tspan x="0" dy="32px">Hello world Again!</tspan>
 <tspan x="0" dy="32px">Hello world How are you today?</tspan> 
</text>
<!--<rect width="500px" height="40px" fill="green" opacity="0.1"/>-->
 </svg>
  <div class="html-text">Hello world!<br>Hello world Again!<br>Hello world How are you today?</div>
</div>

CSS

.html-text {
  color: blue;
  position: absolute;

  top: 10px;
  left: 10px;

  font-family: Arial;
  line-height: 32px;

  font-size: 36px;
  vertical-align: middle;
}

svg {
 position: absolute;
 top: 10px;
 left: 10px;

 height: 150px;
 width: 600px;

 font-family: Arial;
 font-size: 36px;
 vertical-align: middle;

 transform-origin: 0 0;
 dominant-baseline: hanging;
}