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

Question

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

我查看了这个示例，发现： 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)

我希望这有助于理解基础知识，解释您提供的整个示例有点脱离 scope