SVG generated from SVG in DOM does not display text element

[jan-ldwg]

In my DOM I have an SVG element that includes a <text>. After convertig the DOM to SVG the <text> is included, but is it not displayed (neither by Chrome, nor by macOS).

This is the resulting SVG. The circle is displayed correctly, as are other shapes nested inside

 <g class="svg-content" data-view-box="" data-width="16" data-height="16" transform="matrix(1 0 0 1 247.82 741)">
                                          <g class="svg-content" data-view-box="0 0 16 16" data-width="16" data-height="16" transform="matrix(1 0 0 1 0 0)">
                                            <circle cx="8" cy="8" r="7" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-width="2px" color="rgb(8, 20, 22)" pointer-events="all"/>
                                            <text x="50%" y="50%" font-family="monospace" font-size="5px" font-weight="700" fill="rgb(8, 20, 22)" dominant-baseline="middle" text-anchor="middle" color="rgb(8, 20, 22)" pointer-events="all" stroke="none" font-size-adjust="none" font-stretch="100%" font-style="normal" font-variant="normal" direction="ltr" letter-spacing="normal" text-decoration="none solid rgb(8, 20, 22)" text-rendering="auto" unicode-bidi="normal" word-spacing="0px" writing-mode="horizontal-tb" user-select="none">
        BNC
    </text>
                                          </g>
                                        </g>

Has anyone else run into this issue? I tried removing most of the attributes in the SVG tags, but that did not change anything.

[jan-ldwg]

After some further digging and playing around with the generated SVG I found the issue and a workaround. It seems that positions given as percent in the SVG in the DOM are not handled correctly. Here is the original SVG that is part of my DOM:
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <circle cx="8" cy="8" r="7" fill="white" stroke="black" stroke-width="2" /> <text x="50%" y="50%" font-family="monospace" font-size="5" font-weight="bold" fill="black" dominant-baseline="middle" text-anchor="middle" > BNC </text> </svg>

The x and y position can be also be found in the generated SVG (see my post above) but due to the complicated structure of the SVG they seem to no longer reference the correct element and the position is way of, meaning the text id outside the viewbox and therefore not displayed. Sorry for this rough explanation, my knowledge of SVG is quite limited. Anyway, not using percentages fixes this issue, so something like this works:
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <circle cx="8" cy="8" r="7" fill="white" stroke="black" stroke-width="2" /> <text x="8" y="8" font-family="monospace" font-size="5" font-weight="bold" fill="black" dominant-baseline="middle" text-anchor="middle" > BNC </text> </svg>