How do I merge multi svg paths into a single path I wanted to use

Question

How do I merge multi svg paths into a single path I wanted to use in go.js project you can see an example at https://gojs.net/latest/samples/icons.js

I have this image in svg format which have so many paths

Some paths are here for better understanding

I'm working on a network diagram using go.js library in react.js

Please don't add svg samples as screenshots – embed them as markup in a code snippet or code section. This post might be helpful [Is there a way to merge two path elements (svg) using Javascript?](https://stackoverflow.com/questions/5892549/is-there-a-way-to-merge-two-path-elements-svg-using-javascript) — herrstrietzel, Feb 14 '23 at 03:33

score 0 · Answer 1 · answered Mar 21 '23 at 15:13

Here's some code to combine arbitrary Geometry objects in GoJS:

function combineGeometries() {
  const geo = new go.Geometry();
  for (let i = 0; i < arguments.length; i++) {
    const g = arguments[i];
    if (g instanceof go.Geometry) {
      convertToPathGeometry(g).figures.each(f => geo.add(f));
    }
  }
  return geo;
}

function convertToPathGeometry(geo) {
  if (geo.type === go.Geometry.Line) {
    return new go.Geometry()
            .add(new go.PathFigure(geo.startX, geo.startY, false)
                .add(new go.PathSegment(go.PathSegment.Line, geo.endX, geo.endY)));
  } else if (geo.type === go.Geometry.Rectangle) {
    return new go.Geometry()
            .add(new go.PathFigure(geo.startX, geo.startY)
                .add(new go.PathSegment(go.PathSegment.Line, geo.endX, geo.startY))
                .add(new go.PathSegment(go.PathSegment.Line, geo.endX, geo.endY))
                .add(new go.PathSegment(go.PathSegment.Line, geo.startX, geo.endY).close()));
  } else if (geo.type === go.Geometry.Ellipse) {
    const radx = Math.abs(geo.endX - geo.startX)/2;
    const rady = Math.abs(geo.endY - geo.startY)/2;
    const minx = Math.min(geo.startX, geo.endX);
    const maxx = Math.max(geo.startX, geo.endX);
    const midy = (geo.startY + geo.endY)/2;
    return new go.Geometry()
            .add(new go.PathFigure(minx, midy)
                .add(new go.PathSegment(go.PathSegment.SvgArc, maxx, midy, radx, rady, 0, true, true))
                .add(new go.PathSegment(go.PathSegment.SvgArc, minx, midy, radx, rady, 0, true, true).close()));
  } else {
    return geo;
  }
}

// Example:
const $ = go.GraphObject.make;

const G1 = $(go.Geometry, go.Geometry.Rectangle, { endX: 80, endY: 60 });
const G2 = $(go.Geometry, go.Geometry.Ellipse, { startX: 40, startY: 40, endX: 140, endY: 90 });
const G3 = $(go.Geometry, go.Geometry.Line, { startX: 100, startY: 30, endX: 80, endY: 10 });
const G4 = go.Geometry.parse("M 0 100 L 100 100 100 30 20 30 20 50 70 50 70 80 40 80 40 0 0 0z", true).offset(30, 70);
const G = combineGeometries(G1, G2, G3, G4);

The G4 geometry was taken from https://gojs.net/latest/intro/geometry.html.

When G is used as the Shape.geometry of a Shape, one gets something like:

The node template in this case was:

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    $(go.Shape,
      { fill: "white", geometry: G },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      new go.Binding("text"))
  );

How do I merge multi svg paths into a single path I wanted to use

1 Answers1