Images in nested <defs> do not show up in chromium - svg

Question

I have some SVG files whereby one includes the other by using <use /> elements. To merge all those files into one resulting one, I have written some code that transforms ./main.svg from below:
#file: ./svg/shared.svg
<svg>
<image xlink:href="../img/bg.png" id="bg" />
</svg>
#file: ./svg/index.svg
<svg id="index">
<use xlink:href="./shared.svg#bg" />
</svg>
#file: ./main.svg
<svg>
<use xlink:href="./svg/index.svg#index" />
</svg>
into:
<svg>
<defs>
<svg id="svg-index">
<defs>
<image xlink:href="./img/bg.png" id="img-bg" />
</defs>
<use xlink:href="#img-bg" />
</svg>
</defs>
<use xlink:href="#svg-index" />
</svg>
So basically all urls and Ids are resolved and referenced nodes are imported. The script works fine, in Firefox and the result works as well in Inkscape. BUT in chromium the images do not show up. They are loaded, what I can see from the networking tab.
If I modify the images' xlink:href (inspector panel) by adding a little #qwertz at the end of one image, all of them show up, so that seams to be browser related, since the result works in FF and Inkscape.
Any Idea how to fix that?
UPDATE
One thing that may have some effect here is whether the manipulated SVG is already inserted into the dom or not. So this code makes the images appear:
setTimeout(function () {
[...document.querySelectorAll('image')].forEach(
img => img.setAttribute('xlink:href',
img.getAttribute('xlink:href')
)
);
}, 0)
But that feels really hackish and I am really interested in a »cleaner« solution here…