JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

CSS

#drawRegion {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: relative;
}

.scalingText {
  font-size: 400%;
}

@media screen and (max-width: 900px) {
  .scalingText {
    font-size: 300%;
  }
}

@media screen and (max-width: 700px) {
  .scalingText {
    font-size: 200%;
  }
}

@media screen and (max-width: 500px) {
  .scalingText {
    font-size: 100%;
  }
}

JavaScript

debugger;
var svg = d3.select("#drawRegion")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%");
svg.append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");

const rectAroundText = svg
  .append("rect");

const textMiddleX = 50;
const textMiddleY = 50;

const testText = svg
  .append("text");
testText
  .attr("x", textMiddleX + "%")
  .attr("y", textMiddleY + "50%")
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "central")
  .attr("x", "50%")
  .attr("y", "50%")
  .attr("fill", "#000")
  .classed("scalingText", true)
  .text("svdfv");
  
  const textBox = testText.node().getBBox();
  
  rectAroundText
	.attr("x", textBox.x)
  .attr("y", textBox.y)
  .attr("width", textBox.width)
  .attr("height", textBox.height)
  .attr("fill", "yellowgreen");