将相同的变换值从 svg 应用到 html 不会产生相同的结果答案

【问题标题】：Applying same transform values from svg to html doesn't give the same result将相同的变换值从 svg 应用到 html 不会产生相同的结果
【发布时间】：2021-12-31 20:47:12
【问题描述】：

我想将 SVG 转换为 HTML。 Svg 文本有一个转换值。将这些值应用于 HTML 元素不会产生相同的结果：SVG 在它们之间有更多空间，而不是在 HTML 中。我想不出为什么。这是一个示例代码： SVG =>

        <svg
          version="1.1"
          id="Calque_1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          viewBox="0 0 512 512"
          enable-background="new 0 0 512 512"
          xml:space="preserve"
        >
          <rect id="background" fill="#E0FFCC" width="512" height="512" />
          <text
            id="company"
            transform="matrix(1 0 0 1 124.9124 378.1289)"
            font-family="'Rockwell-Regular'"
            font-size="48px"
          >
            My comfort
          </text>
          <text
            id="headline"
            transform="matrix(1 0 0 1 163.2376 439.8711)"
            font-family="'Rockwell-Regular'"
            font-size="21px"
          >
            fuzzboxes jazzbos
          </text>
        </svg>

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);
          "
          font-size=""
        >
          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);
          "
          font-size=""
        >
          fuzzboxes jazzbos
        </div>
      </div>

结果从左到右：SVG => HTML

【问题讨论】：

请将代码贴在这里，不要分享代码链接。

标签： html css svg css-transforms

【解决方案1】：

原因是在 SVG 中，文本的 X、Y 位置位于基线处。也就是说，M 的左下角在 (0,0) 处。

在 HTML <div> 中，文本从 div 开始。所以M 的左上角 大约在 (0,0)。因此，等效基线将位于 (0,30) 之类的位置。由于它开始时较低，因此在应用变换矩阵后会降低。

这是我的意思的演示。我最初已经把变换拿出来了。请注意默认情况下文本的位置。然后将鼠标悬停在 SVG（顶部）或 div（底部）上以查看应用动画的变换。

svg {
  width: 512px;
}

#company, #headline {
  transition: transform 0.5s;
}

svg:hover #company {
  transform: translate(124.9124px, 378.1289px);
}

svg:hover #headline {
  transform: translate(163.2376px, 439.8711px);
}



div {
  transition: transform 0.5s;
}

div:hover div:nth-child(1) {
  transform: translate(124.9124px, 378.1289px);
}

div:hover div:nth-child(2) {
  transform: translate(163.2376px, 439.8711px);
}

<svg
  id="Calque_1"
  viewBox="0 0 512 512"
  xml:space="preserve"
>
  <rect id="background" fill="#E0FFCC" width="512" height="512" />
  <text
    id="company"
    font-family="'Rockwell-Regular'"
    font-size="48px"
  >
    My comfort
  </text>
  <text
    id="headline"
    font-family="'Rockwell-Regular'"
    font-size="21px"
  >
    fuzzboxes jazzbos
  </text>
</svg>


<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;
    "
    font-size=""
  >
    My comfort
  </div>
  <div
    style="
      position: absolute;
      font-family: 'Rockwell-Regular';
      font-size: 21px;
      transform-origin: top left;
    "
    font-size=""
  >
    fuzzboxes jazzbos
  </div>
</div>

您可以通过将 SVG 设置为使用 dominant-baseline: hanging，使 SVG 的行为更接近 HTML 行为。

svg {
  width: 512px;
  dominant-baseline: hanging;
}

【讨论】：