Duplicate id in svg

[faniry-abl]

I render multiple avatars in a custom avatar editor and when some of them are removed from the DOM, then the remaining svg does not render well anymore on Safari only.

I have tried the following code (shivam1410/fangpenlin-avataaars-generator-angular#5) but it did not work, on the contrary, it broke the svg:

var svgSel = '#root > div > div > main > main > div > div > div.avatar-main-preview > svg';
document.querySelectorAll(svgSel + ' [mask^="url("]').forEach(node => {
    var attributMask = node.getAttribute("mask");
    node.setAttribute("mask",  + attributMask.replace('url(', 'url(' + location.href));
});
document.querySelectorAll(svgSel + ' [filter^="url("]').forEach(node => {
    var attributFilter = node.getAttribute("filter");
    node.setAttribute("filter",  + attributFilter.replace('url(', 'url(' + location.href));
});
document.querySelectorAll(svgSel + ' [fill^="url("]').forEach(node => {
    var attributFill = node.getAttribute("fill");
    node.setAttribute("fill",  + attributFill.replace('url(', 'url(' + location.href));
});

Could this be because:

• there is a duplicate id of "Avataaar" inside src/avatar/index.tsx?
• there is id="Mask" in 2 separate files: src/avatar/index.tsx and src/avatar/top/WinterHat1.tsx?

My confusion here is:

• should we use a class instead of an id
• or have completely 2 different names for the 2 ids that are conflicting here?

Thank you!

[faniry-abl]

This issue is resolved when instead of removing my avatars from the DOM, I put them away from the viewport and set their opacity to 0.