CODEWITHSUNDEEP
htmlcsssvgcss-transforms
Neovea
Neovea

Reputation: 514

Applying same transform values from svg to html doesn't give the same result

I want to transform SVG to HTML. Svg texts have a transform value. Applying those values to HTML elements doesn't give the same result: the SVG have way more space between them, not in the HTML. I cannot figure why. Here is a sample code: 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>

Result from left to right: SVG => HTML enter image description here

Upvotes: 0

Views: 56

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

The reason for this is that in an SVG, the X,Y position of the text is at the baseline. In other words, the bottom left of the M is at (0,0).

In HTML <div>, the text starts out inside the div. So the top left of the M will be at approximately (0,0). So the equivalent baseline will be at something like (0,30). Since it starts out lower, it will end up lower after the transform matrix is applied.

Here's a demo of what I mean. I've taken the transforms out initially. Note where the text is positioned by default. Then hover over the SVG (top) or div (bottom) to see the transforms applied with an animation.

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>

You could make the SVG behave a closer to the HTML behaviour, by setting the SVG to use dominant-baseline: hanging.

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

Upvotes: 3

Related Questions