如何将 DOM 坐标转换为 SVG 坐标？

Question

我正在尝试转换从ontouch 事件（更具体地说是clientX 和clientY）获得的dom coordiante，但是我不明白我该怎么做。

我查看了这个例子，发现： https://codepen.io/ehsanjso/pen/xNZgPE?editors=1010 而且我一个都没听懂。

Answer 1

如果 DOM 和 SVG 具有相同的尺寸，则以像素和百分比为单位的坐标相同。如果一个比另一个大/小，则坐标百分比相同，像素不同。 X维度计算示例：

示例 1

• DOM 的宽度为 200
• SVG 元素的宽度为 200
• DOM 中 x 处的点：50 => SVG 中 x 处的点：50 (25%)

示例 2

• DOM 的宽度为 200
• SVG 元素的宽度为 100
• DOM 中 x 处的点：50 => SVG 中 x 处的点：25 (25%)

公式：target_width * (point / width)

我希望这有助于理解基础知识，解释您提供的整个示例有点超出范围