javascript - 当它们具有不同的变换时，有没有办法从一个 SVG 的坐标转换到另一个

Question

我有一个 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>

使用 CSS：

.container {
  perspective: 2600px;
  width: 6000px;
  overflow: hidden;
  margin-top: -4000px;
  display: grid;
}

.container .one {
  transform: rotateX(120deg);
  margin-bottom: -200px;
  transform-origin: bottom;
  grid-area: 1 / 1;
  z-index: 0;
}

.container .two {
  margin-bottom: -200px;
  transform-origin: bottom;
  grid-area: 1 / 1;
  z-index: 1;
}

有没有办法在“一”尺度上获取坐标并将它们转换为“二”尺度？

我试图创建一个 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());

但是当添加到“二”时，结果点未绘制在正确的位置。

标签： javascripthtmlsvg