agatanga / flags Goto Github PK

Since the ID is persisted in the SVG file the ID cannot be removed, which is necessary to use it multiple times on the same page, since IDs need to be unique.

This is an edge-case, I know, but it's a weird one that I haven't been able to resolve in any meaningful way. When I put the flag of Cameroon inside a cell of a table that is then sortable using the javascript tablesort library, sometimes the flag becomes all-yellow. When inspecting the element, it appears the yellow star in the flag has grown out of proportion and is taking up more space than the entire flag. If I delete the entire <g fill="#fcd116" [...]> element, the flag comes back, but without the yellow star in the middle. Similarly, if I reduce the scale, which defaults to 7.1111, to something like 0.4, it looks all right again.

My guess is that there's something going on here where the svg is unable to figure out its 'actual' size while the table is being resorted, but I can't figure out why this is only affecting this particular flag and none of the others that have small stars in them.