I am trying to figure out how to use SVG.js to draw text. In my attempt below, the text is being created and drawn, but only a few dots show up. This must be part of the text being drawn, but it is being clipped. I am not sure why this clipping is happening or how to fix it.

My end goal is to create an SVG with text fitted inside some geometry. To do this, I need to measure the text first so I can compute the geometry dimensions. Therefore, it is important to me to create the SVG object before adding the SVG to a DOM element.

For the code below, what do I need to do so the text show up correctly?

const draw = SVG().size(300, 300);

const text = draw.text("000000000");

text.attr({
  fill: "red",
  stroke: "green",
  "font-family": "Roboto",
  "font-size": 10
});

const bbox = draw.bbox()

console.log( bbox );

draw.addTo("#rectID");

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>

<div id="rectID">
</div>