d3.js - 将生成的路径缩放到与加载到 matter-js 中的 SVG 路径相同的大小

Question

我正在使用 d3 将保存的 svg（在 illustrator 中创建）加载到预先命名的 div 中。div 还包含使用以下内容的画布元素；

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

然后我设置了我的 matter.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,
    },
    });

然后，我从加载的带有名为“shape”的 ag 元素的 svg 中选择一组特定的路径和多边形，并通过一个函数将它们传递给使用以下命令创建 matter.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 路径相同的位置，而且我有点不知道该怎么做这样做是因为我对 matter.js 有点陌生。我是从 resize 函数中应用比例还是完全错误的？这是我目前拥有的，黑线是创建的顶点，白色是加载的 svg：