Fuzzy Bug

by ksumarine

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>
    <svg id="test" preserveAspectRatio="xMinYMin slice" viewBox="0, 0, 500, 401.18" width="100%" overflow="hidden">
      <rect width="100%" height="100%" />
      <g transform="scale(1, 1)" />
      <g transform="scale(1, 1)">
        <g transform="translate(26, 10)" class="e">
          <rect width="380" height="76" fill="#161816" />
          <g>
            <text transform="translate(4,35)" fill="#F5F5F5">Lorem ipsum dolor sit</text>
          </g>
          <g>
            <text class="s" transform="translate(4,60)" fill="#F5F5F5">Cras aliquam tortor</text>
          </g>
        </g>
      </g>
    </svg>
  </body>

</html>

SCSS

* {
  box-sizing: border-box;
}

#test {
  display: block;
  top: 0;
  left: 0;
  height: calc(100% - 1em);

  &.over {
    cursor: crosshair !important;
  }

  g {
    touch-action: none;
    /* will-change: transform, contents; */
  }

  g.e {
    cursor: pointer;

    rect,
    line {
      stroke-width: 1;
      stroke: grey;
    }

    text {
      font-family: Calibri, "Arial Narrow", Arial, sans-serif;
      font-size: 2.52em;
      font-weight: bolder;
      text-anchor: start;
      pointer-events: none;
      user-select: none;
      &.s {
        font-size:20px;
      }
    }
  }
}

TypeScript

const thesvg: SVGSVGElement = document.getElementById('test');

document.addEventListener('mousedown', (e) => {
  thesvg.classList.add('over');
});
document.addEventListener('mouseup', (e) => {
  thesvg.classList.remove('over');
});