How can I create an svg body out of svg parts with matter.js?

Question

I have two svgs in my html and want to group them, so in the end I have one Body which contains 2 svg parts. How can I achieve that?

Working pen: https://codepen.io/m42444/pen/eYVEbOq

Thanks for any help!

Currently I am rendering both svgs at their own like in the code below:

const vertexSets = [],


$('#svgOne').find('path').each(function(i, path){
    var svgOne = Bodies.fromVertices(percentX(80), percentY(30), Matter.Vertices.scale(Svg.pathToVertices(path, 10), (window.innerWidth / 2000), (window.innerWidth / 2000)), {
      render: {
        fillStyle: #F9420B,
        strokeStyle: #F9420B,
        lineWidth: 1
      }
    }, true);

  vertexSets.push(svgOne);
  });
  
  

  $('#svgTwo').find('path').each(function(i, path){
    var svgTwo = Bodies.fromVertices(percentX(80), percentY(30), Matter.Vertices.scale(Svg.pathToVertices(path, 10), (window.innerWidth / 2000), (window.innerWidth / 2000)), {
      render: {
        fillStyle: #F9420B,
        strokeStyle: #F9420B,
        lineWidth: 1
      }
    }, true);
  
  vertexSets.push(svgTwo);
  });
  
  
  World.add(engine.world, vertexSets);

<svg id="svgOne" style="position:absolute; width: 0; height: 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
        <g>
          <path class="e" d="M93.87,11.03S-16.33,82.23,2.07,171.13s105.8,179.6,174.3,238c68.5,58.4,109.1,86.2,125.2,179.6s7.3,128.4,53.8,100.2,56.9,2.4,74.5-29.7c17.5-32.2-64.7-117.3-78.4-164.2-13.7-46.8,12-169.1-18.3-328.1C302.87,8.03,164.07-19.67,93.87,11.03Z"/>                  
        </g>
      </svg>


      <svg id="svgTwo" style="position:absolute; width: 0; height: 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
        <g> 
          <path d="M116.37,127.73c9.7-4,18.8-7.8,29.1-12.1-2.9-7.1-5.6-14-8.7-20.8-1.4-3.1-2.2-5.6,1.9-6.9,3.2-1,6.6-3.4,8.8,1.9,7.5,18.5,15.3,37,22.8,55.5,2.1,5.1-2.8,11.6-8.3,11.2-1.3-.1-3.1-2-3.7-3.4-2.5-6.2-4.7-12.5-7.1-18.7-.9-2.5-2-4.9-3.2-7.8-9.3,3.8-18.2,7.6-28.2,11.7,3.1,7.4,6.1,15,9.4,22.6,2.5,5.7-1.1,11.2-7.5,10.7-1.3-.1-3-2-3.6-3.4-7.8-18.6-15.4-37.4-23.2-56-1.5-3.7-1.4-6.5,2.7-8.1,3.9-1.6,7.1-1.7,9.2,2.9,2.9,6.8,6.2,13.5,9.6,20.7Z"/>
        </g> 
      </svg>

Answer 1

Do you mean something like this? (like in the code below)

The svg images don't look as they would on the webpage, but I assume this has to do with the Matter.Svg.pathToVertices function, since the documentation states: "... Note that this function is not guaranteed to support complex paths (such as those with holes). ..."

Stripped down demo-code, based of the provided CodePen:

let Engine = Matter.Engine,
    Render = Matter.Render,
    Body = Matter.Body,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite,
    Svg = Matter.Svg,
    Vertices = Matter.Vertices,
    Runner = Matter.Runner;

let vertexSets = [],
    firstColor = '#F9420B',
    secondColor = '#009245';

let engine = Engine.create();

let render = Render.create({
    element: document.body,
    engine: engine,
    options: {
        wireframes: false,
        showInternalEdges: false,
        width: 400,
        height: 200,
        background: "#fff"
    }
});

let svgPath = document.querySelector('#svgOne path');
let svgVertices = Bodies.fromVertices(200, 75, Vertices.scale(Svg.pathToVertices(svgPath), .2, .2), {
    render: {
        strokeStyle: firstColor,
        lineWidth: 1
    }
}, true);
    
vertexSets.push(svgVertices);

svgPath = document.querySelector('#svgTwo path'); 

svgVertices = Bodies.fromVertices(240, 50, Vertices.scale(Svg.pathToVertices(svgPath,200),1, 1),{
    render: {
        strokeStyle: secondColor,
        lineWidth: 1
    }
}, true);

vertexSets.push(svgVertices);

let body = Composite.create({});
let constraint1 = Matter.Constraint.create({
        pointA: { x: 0, y: -45 },
        bodyA: vertexSets[0],
        bodyB: vertexSets[1],
        pointB: { x: 24, y: 26 }, 
        stiffness:.1,
        render:{strokeStyle: '#ff0000'},
       length:10
    });
    
let constraint2 = Matter.Constraint.create({
        pointA: { x: -45, y: -40 },
        bodyA: vertexSets[0],
        bodyB: vertexSets[1],
        pointB: { x: -11, y: 30}, 
        stiffness:.1,
        render:{strokeStyle: '#0000ff'},
       length:10
    })
    
Composite.add(body, [...vertexSets, constraint1, constraint2] );

Composite.add(engine.world, [
    body,
    Bodies.rectangle(0, 200, 1200, 50.5, { isStatic: true })
]);

Runner.run(engine);
Render.run(render);

<script src="//cdn.jsdelivr.net/npm/[email protected]/build/matter.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/decomp.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/pathseg.min.js"></script>
  <body>
    <div class="container"> 
      <svg id="svgOne" style="position:absolute; width: 0; height: 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
        <g><path class="e" d="M93.87,11.03S-16.33,82.23,2.07,171.13s105.8,179.6,174.3,238c68.5,58.4,109.1,86.2,125.2,179.6s7.3,128.4,53.8,100.2,56.9,2.4,74.5-29.7c17.5-32.2-64.7-117.3-78.4-164.2-13.7-46.8,12-169.1-18.3-328.1C302.87,8.03,164.07-19.67,93.87,11.03Z"/></g></svg>
      <svg id="svgTwo" style="position:absolute;display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
   <g><path d="M116.37,127.73c9.7-4,18.8-7.8,29.1-12.1-2.9-7.1-5.6-14-8.7-20.8-1.4-3.1-2.2-5.6,1.9-6.9,3.2-1,6.6-3.4,8.8,1.9,7.5,18.5,15.3,37,22.8,55.5,2.1,5.1-2.8,11.6-8.3,11.2-1.3-.1-3.1-2-3.7-3.4-2.5-6.2-4.7-12.5-7.1-18.7-.9-2.5-2-4.9-3.2-7.8-9.3,3.8-18.2,7.6-28.2,11.7,3.1,7.4,6.1,15,9.4,22.6,2.5,5.7-1.1,11.2-7.5,10.7-1.3-.1-3-2-3.6-3.4-7.8-18.6-15.4-37.4-23.2-56-1.5-3.7-1.4-6.5,2.7-8.1,3.9-1.6,7.1-1.7,9.2,2.9,2.9,6.8,6.2,13.5,9.6,20.7Z"/></g></svg>
    </div>
</body>