Displaying SVG with multiple paths in diagram

GoJS
1

I need to display an SVG in my diagram that is stored in a json file with numerous other SVG’s. The SVG’s are not saved in a .svg file independently. We use icomoon, so I have a single json file that stores hundreds of SVG’s. Each of the SVG’s can have multiple paths and fill colors.

Is it possible to build out the SVG using go.Shape’s geometryString? I am currently using that with displaying an svg that only has a single path and fill color, but I wasn’t sure how that might work with multiple paths. Is there a better way? Are there any examples for something like this?

Thanks!

2

Have you seen the icons sample? It uses icomoon SVG path strings. Multiple paths shouldn’t be a problem.

3

I did see this example, but it isn’t using any icons with multiple paths or multiple fill colors. I wasn’t sure if that was intentional (as in, it isn’t possible) or not. Each SVG in my icomoon generated file has a ‘paths’ array and an array containing fill colors for each path. So each path can have a different fill color. In looking at the Path documentation, it looks like I can separate each path with an ‘X’ in the geometry string. But I am not understanding how to specify a fill color for each path.

4

While a go.Geometry can have multiple paths, each Shape can only have 1 Geometry and 1 fill.

You can only do this in GoJS by converting each path into an individual shape and giving each shape a different fill. Then you can stack those Shapes atop each other in a Panel.

5

That’s what I was thinking I would have to do. I don’t suppose there is an example anywhere for “stacking” shapes is there?

6

There isn’t, but it depends how you want them stacked. If you just want them offset by each other you can use the default panel, a Position panel.

Here’s a simple example: https://codepen.io/simonsarris/pen/rKaYXM?editors=1010

For a bunch of Shapes you want to arrange in a concentric fashion, use a Spot panel or Table panel with only 1 cell. It may be worth reviewing the options depending on what you want to do: GoJS Panels -- Northwoods Software

Simon