Разместите SVG <text> в том же положении, что и HTML <div> с текстом внутри

let svg = document.querySelector('.svgText')
let {width} = svg.getBBox();

// adjust viewBox
svg.setAttribute('viewBox', [0,0, width, 1].join(' '));


// fontSize change
inputFontSize.addEventListener('input', e=>{
  let fontSize = +e.currentTarget.value;
  document.body.style.fontSize = `${fontSize}px`;
})

body {
  font-family: verdana;
  font-size: 80px;
}

* {
  box-sizing: border-box;
}

.fnt-siz, .tools,
h3 {
  font-size: 16px;
  line-height: 1.2em;
}

.tools {
  position: sticky;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5em;
  font-size: 20px;
  line-height: 1.2em;
}

.htmlText {
  position: absolute;
  background: yellow;
  color: red;
  margin-left: 0;
  padding-left: 0;
  left: 0.5em;
  top: 2em;
}

svg {
  font-size: 1px;
  letter-spacing: inherit;
}

.svgTextOverlay {
  position: relative;
}

svg {
  font-size: 1em;
  height: 1em;
  overflow: visible;
  outline: 2px dotted red;
}

.svgText {
  position: absolute;
  left: 0;
  top: 0;
}

<div class = "tools">
  <p><label>fontsize <input id = "inputFontSize" type = "range" value = "80" min = "10" max = "200"></label></p>
</div>

  <h3>Synchonize SVG with HTML font-size</h3>
  <div class = "htmlText">
    <span class = "svgTextOverlay">
      Hamburg fonts
      <!-- svg text overlay -->
      <svg id = "svg1" class = "svgText" viewBox = "0 0 1 1"  >
        <text x = "0" y = "1" font-size = "1" >Hamburg fonts</text>
      </svg>
    </span>
  </div>

(async() => {
  await document.fonts.ready;
  positionSVGTextOverlay(htmlText, svgText);


})()

function positionSVGTextOverlay(htmlEl, svgEl) {
  // copy styles
  let styles = window.getComputedStyle(htmlEl);
  let {
    fontFamily,
    fontSize
  } = styles;
  fontSize = parseFloat(fontSize);


  //get HTML element position
  let {
    x,
    y,
    bottom,
    width,
    height
  } = htmlEl.getBoundingClientRect();

  // get vertical metrics to calculate y offset
  let metrics = getFontMetrics(fontFamily);
  let {
    fontBoundingBoxAscent,
    fontBoundingBoxDescent,
    hangingBaseline,
    alphabeticBaseline
  } = metrics;

  let renderedHeight = (fontBoundingBoxDescent + alphabeticBaseline);
  let scale = 1 + (fontBoundingBoxDescent + alphabeticBaseline) / fontBoundingBoxDescent
  let top = Math.floor(bottom - fontSize * scale)


  svgEl.setAttribute(
    "style",
    `
  position:absolute;
  display:inline-block;
  font-size: ${fontSize}px;
  font-family: ${fontFamily};
  left: ${x}px;
  top: ${ top  }px;
  `
  );

  //adjust viewBox
  let bb = svgEl.getBBox();
  svgEl.setAttribute('viewBox', [0, 0, bb.width, 1].join(' '));


}



function getFontMetrics(font) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.font = `1000px ${font}`;
  ctx.textBaseline = "top";
  return ctx.measureText('H');
}

html,
body {
  margin: 0;
  padding: 0;
}

.fnt-siz,
.tools,
h3 {
  font-size: 16px;
  line-height: 1.2em;
}

.tools {
  position: sticky;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5em;
  font-size: 20px;
  line-height: 2.5em;
}

.htmlText {
  font-family: sans-serif, Verdana, Georgia;
  position: absolute;
  background: yellow;
  color: red;
  margin-left: 0;
  padding-left: 0;
  left: 50px;
  top: 200px;
  font-size: 90px;
}

.svgText {
  font-size: 1em;
  height: 1em;
  overflow: visible;
  outline: 1px solid red;
}

<div class = "tools">
  <p><label>fontsize <input id = "inputFontSize" type = "range" value = "80" min = "10" max = "200"></label></p>
</div>

<h3>Synchonize SVG with HTML font-size</h3>
<div id = "htmlText" class = "htmlText">
  First Line
</div>

<!-- svg text overlay -->
<svg id = "svgText" class = "svgText" viewBox = "0 0 1 1">
  <text y = "1" font-size = "1" >First Line
</text>
</svg>

<script>
  // fontSize change
  inputFontSize.addEventListener("input", (e) => {
    let fontSize = +e.currentTarget.value;
    htmlText.style.fontSize = `${fontSize}px`;
    positionSVGTextOverlay(htmlText, svgText);

  });
</script>