SVG Icon Display Issue


We trying to add some svg icons.
Some of them are displaying strange behavior by filling in some of the detail.

Here is a link to codepen showing the issue

Any Idea how we can solve this?

Do you have a screenshot of what the icons are supposed to look like? Nevermind, I see it in the corner now. We’ll check this out.

So it looks like you’re using some alternating fills, and you have a box that fills and then a dollar sign over that box that is transparent. In GoJS, this would have to be done with separate shapes because when the box in the bottom left fills, it can’t then be covered with something transparent. It could also be done by not filling the whole box and leaving the dollar sign sections transparent, but I imagine coming up for the SVG path for that would be a challenge.

I think an easier alternative is to use go.Pictures with SVG sources. Some info about that here: