I have an application where a bunch of glyphs get loaded into defs and then placed on a game board (https://github.com/AbstractPlay/renderer). I was running into this odd issue where sometimes pieces wouldn't get rendered. I narrowed the problem down and am asking for assistance.
Here's the minimal example (https://jsfiddle.net/krtwhuLb/3/):
var canvas = SVG().addTo('#canvas').size('100%', '100%')
// create your example here
const group1 = canvas.defs().group().id("A2");
group1.circle(200).translate(10,10).fill("red");
const group2 = canvas.defs().group().id("A20");
group2.circle(200).translate(50,50).fill("green");
const group3 = canvas.defs().group().id("A200");
group3.circle(200).translate(90,90).fill("blue");
const got1 = canvas.findOne("#A2");
canvas.use(got1);
const got2 = canvas.findOne("#A20");
canvas.use(got2);
const got3 = canvas.findOne("#A200");
canvas.use(got3);
If you look at the resulting SVG, you'll see that the <use> tag for #A20 got converted into <use xlink:href="#aa2200"></use>, which of course doesn't exist in defs and so the green circle doesn't display.
I can add() it, though, and it displays (https://jsfiddle.net/nmas40k7/). This happens in Firefox too.
I just don't know if this is some weird browser thing or if it's happening in SVG.js itself or what. Any assistance would be appreciated. Thank you!!
