`use` apparently converting what it thinks are shortened hexadecimal colour strings

[Perlkonig]

Bug report

use() is apparently converting IDs that it thinks are shortened hexadecimal colour strings.

Fiddle

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);

Explanation

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.

[Sphinxxxx]

.use() calls .attr('href', ..., and it's a sanity check in attr() that expands any hex-color-like value to the full hex color, thus an invalid href id.

[Fuzzyma]

Gnaaa I hate to make exceptions in that regard. Maybe I should define attributes that are designed to take colors and only test for those

[Fuzzyma]

Took a while for me to fix but here you go :)