Масштабирование сгенерированных путей до того же размера, что и SVG-пути, загруженные в вещество-js

Question

Я загружаю сохраненный svg (созданный в иллюстраторе), используя d3 в предварительно названный div.Div также содержит элемент canvas, используя следующую команду:

d3.xml("moniac.svg").mimeType("image/svg+xml").get(function (error, xml) {
    if (error) throw error;
    document.getElementById('moniac').appendChild(xml.documentElement);

Затем я настроил свой физический движок material.js и добавил прослушиватель событий, чтобы при изменении размера svg холст пропорционально изменялся.Пока все хорошо.

const myCanvas = document.getElementById('water');
    const {
        clientWidth: width,
        clientHeight: height,
      } = document.querySelector('#moniac svg');
    const engine = Matter.Engine.create();
    const world = engine.world;
    const Bodies = Matter.Bodies;
    const Composites = Matter.Composites;
    const Common = Matter.Common;
    const Svg = Matter.Svg;
    const Vertices = Matter.Vertices;
    const render = Matter.Render.create({
    canvas: myCanvas,
    engine,
    options: {
      width,
      height,
      background: 'transparent',
      wireframes: false,
      showAngleIndicator: false,
    },
    });

Затем я выбираю определенную группу путей и полигонов из загруженного svg с элементом ag под названием 'shape' и пропускаю их через функцию для создания статических вершин material.js, используяпосле

    let paths = d3.select('#shape').selectAll('polygon')._groups[0];
    console.log ('polygons', paths )
    const vertex = [];
    paths.forEach((path) => {
      const vertices = d3.select(path).attr('points');
      let newShape = Matter.Vertices.fromPath(vertices);
      vertex.push(Vertices.scale(newShape, 1, 1))
    })


    paths = d3.select('#shape').selectAll('path')._groups[0];
    paths.forEach((path) => {
      const NUM_POINTS = 200
      let points = [];
      let len = path.getTotalLength();
      for (var i=0; i<=NUM_POINTS-1; i++) {
        let pt = path.getPointAtLength(i * len / (NUM_POINTS -1));
        points.push(pt.x, pt.y);
      }
      let newShape = Matter.Vertices.fromPath(String(points));
      vertex.push(newShape)
    })
    let newVertices = Matter.Bodies.fromVertices(width/2, height/2, vertex,{isStatic: true});
    Matter.World.add(world, newVertices);

... и вот тут-то и возникает проблема, поскольку новые созданные мной вершины не масштабируются в ту же позицию, что и пути svg, из которых они были созданы, и я 'Я немного застрял в том, как бы я это сделал, так как я немного новичок в деле .js.Применять ли шкалу из функции изменения размера или это совершенно неправильно?Это то, что у меня сейчас есть, черные линии - это созданные вершины, а белые - это загруженная SVG: