Javascript 当一个SVG有不同的变换时，有没有一种方法可以从一个SVG的坐标转换到另一个SVG的坐标

我有一个div，其中包含两个SVG，一个在另一个上面显示：

<div class="container" id="container">
  <svg class="one" id="one" height="6000" width="6000">
    ...
  </svg>

  <svg class="two" id="two" height="6000" width="6000">
    ...
  </svg>
</div>

有没有办法在“一”刻度上取坐标并将其转换为“二”刻度

我尝试创建一个SVG点，并将其x/y设置为“一”坐标，然后转到屏幕坐标，然后通过

let point = one.createSVGPoint();

point.x = 3000;
point.y = 5268;

// SVGToScreen
point = point.matrixTransform(one.getScreenCTM());

// ScreenToSVG
point = point.matrixTransform(two.getScreenCTM().inverse());

---

但是当添加到“二”时，结果点没有绘制在正确的点上。

I有没有理由使用两个元素一个在另一个元素之上？您可以在单个svgNo下对具有不同转换的两个元素执行相同的操作，不需要两个svg。我在同一个盒子里试过两个（一个变形了，另一个没有），但也没有运气。也许我问错了问题。我想变换主坐标（或者如果你愿意的话），然后把另一个元素放在未变换的坐标之上，但就好像我在变换的比例上指定坐标一样。我认为这并不总是可能的。。。例如，如果旋转，则变换后的图元不能绘制为（仅绘制为或）。很明显，你可以用变换矩阵计算每个点的变换坐标，并根据这些点画出简单的元素。实际上，这很好。假设我只想对单个点执行反向变换。

let point = one.createSVGPoint();

point.x = 3000;
point.y = 5268;

// SVGToScreen
point = point.matrixTransform(one.getScreenCTM());

// ScreenToSVG
point = point.matrixTransform(two.getScreenCTM().inverse());