为何将SVG文本的transform值应用到HTML元素后效果不一致

• 对齐基准不一致：SVG的<text>元素transform属性里的y坐标，对应的是文本基线的位置，而你HTML中设置了transform-origin: top left，transform的y坐标对应的是文本块的顶部边缘，同等坐标下HTML文本会比SVG文本位置更靠上，导致两段文本间距缩小。
• 盒模型默认属性差异：HTML块级元素默认有line-height（通常为字体大小的1.2~1.5倍），部分浏览器还会自带默认的margin、padding，而SVG文本不存在这些额外间距属性。

给HTML的文本div新增对应属性，对齐和SVG一致的渲染规则即可：

1. 新增dominant-baseline: baseline 让HTML文本的对齐基准和SVG保持一致
2. 新增line-height: 1 取消默认行高带来的额外间距
3. 新增margin: 0; padding: 0 清除浏览器默认边距

修复后的HTML代码如下：

<div
  style="
    position: relative;
    background-color: #e0ffcc;
    width: 512px;
    height: 512px;
  "
>
  <div
    style="
      position: absolute;
      font-family: 'Rockwell-Regular';
      font-size: 48px;
      transform-origin: top left;
      transform: matrix(1, 0, 0, 1, 124.9124, 378.1289);
      dominant-baseline: baseline;
      line-height: 1;
      margin: 0;
      padding: 0;
    "
  >
    My comfort
  </div>
  <div
    style="
      position: absolute;
      font-family: 'Rockwell-Regular';
      font-size: 21px;
      transform-origin: top left;
      transform: matrix(1, 0, 0, 1, 163.2376, 439.8711);
      dominant-baseline: baseline;
      line-height: 1;
      margin: 0;
      padding: 0;
    "
  >
    fuzzboxes jazzbos
  </div>
</div>

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