Reference SVG text element in path coordinates - svg

Question

Is it possible to programmatically reference the extents of a text bounding box while creating a path? For example, depending on the chosen font, scale, and glyphs, a specific text might be larger or smaller. I always want, for example, a path drawn exactly under the text. Or over the text (not using the text-decoration: underline/overline attributes, but by using a path). Alternatively, if I need to guess the width of the text, is it possible to at least center a path horizontally relative to a text block without knowing its exact extents?
I played around with the "50%" attributes, but those always seem to be relative to the page, not individual SVG elements.
Example:
<svg height="200" width="300">
<text x="0" y="50" style="fill: red">Blue line on top, green line on right</text>
<path d="m 0 0 h 50" style="stroke-width: 2px; stroke: blue" />
<path d="m 50 0 v 15" style="stroke-width: 2px; stroke: green" />
</svg>
How can the path of the blue line be made to be exactly on the top boundingbox, the green line to be exactly on the righthand side of the text element?

Answer 1

Maybe real SVG gurus can chime in and create exactly what you want.
The JavaScript/Web Component is not required, I just did not want to copy/paste SVG code
customElements.define("svg-text-border", class extends HTMLElement{
connectedCallback(){
setTimeout(()=>{ // wait till innerHTML is parsed
this.innerHTML =
`<svg viewbox="0 0 220 30">
<path d="M10 20h200" stroke="red" pathLength="100" id="R" />
<path d="M210 20v-15" stroke="green"/>
<path d="M210 5h-200" stroke="blue"/>
<text textLength="90%">
<textPath href="#R" startoffset="100" text-anchor="end">
${this.innerHTML.trim()}
</textPath>
</text>
</svg>`;
});
}
})
<style>svg{ max-height:60px }</style>
<svg-text-border>The quick brown fox jumps over the lazy dog</svg-text-border>
<svg-text-border>Hello World!</svg-text-border>
<svg-text-border>Web Components are Cool!</svg-text-border>