Javascript 缩放图像会导致pageX/pageY到SVG的转换出现问题

我试图移动一个位于HTML图像中心的SVG圆圈。如果你把鼠标放在图像上并拖动圆圈，效果会很好

但是，如果我缩放图像（点击代码笔中的+按钮），pageX和pageY到SVG坐标的转换就会出错

我应该如何正确处理这个问题？（我的完整代码同时处理SVG的触摸和鼠标事件——在本例中，我将其简化为鼠标事件）

我的密码笔：

以下是我获得坐标的方式（请参阅codepen以获取可运行的示例）：

相关SVG：

<svg   id = "zsvg" class="zonelayer" viewBox="0 0 400 200" width="400" height="300" >
  <circle id="c1" ng-attr-cx="{{cx}}" ng-attr-cy="{{cy}}" r="20" stroke="blue" fill="purple"  />
</svg>

---

首先，您通常会使用

clientX

和

clientY

而不是

pageX

和

pageY

其次，您正在使用的Ionic（？）zoomTo（）函数正在对容器分区应用3D变换

style="transform: translate3d(-791.5px, -173px, 0px) scale(2);"

我不希望

getScreenCTM（）

处理3D变换。即使是那些实际上是2D的，因为它们在Z轴上什么都不做

您需要：

以不同的方式进行缩放。请自己处理它，这样您就可以用一种友好的方式来处理它了。或者直接将缩放因子相乘。或

找到一种方法来获取爱奥尼亚应用的转换的详细信息，并适当地更新转换后的鼠标坐标

更新：

SVG 2中

getScreenCTM（）

的定义已更改。在SVG1.1中是这样的。在SVG 2中，显式定义如何计算结果。尽管它没有指定如何处理祖先元素上的三维变换

在Chrome和Firefox上。Chrome似乎已经实现了SVG2定义，但它有一个bug。它没有返回正确的变换矩阵。不过Firefox尚未更新。它不包括祖先元素上的任何转换

---

我现在相信Chrome中的bug是您的示例无法在那里工作的原因。但是，如果您想成为跨浏览器用户，我的建议是自己进行缩放并调整变换（或坐标）。首先，您通常会使用

clientX

和

clientY

，而不是

pageX

和

pageY

其次，您正在使用的Ionic（？）zoomTo（）函数正在对容器分区应用3D变换

style="transform: translate3d(-791.5px, -173px, 0px) scale(2);"

我不希望

getScreenCTM（）

处理3D变换。即使是那些实际上是2D的，因为它们在Z轴上什么都不做

您需要：

以不同的方式进行缩放。请自己处理它，这样您就可以用一种友好的方式来处理它了。或者直接将缩放因子相乘。或

找到一种方法来获取爱奥尼亚应用的转换的详细信息，并适当地更新转换后的鼠标坐标

更新：

SVG 2中

getScreenCTM（）

的定义已更改。在SVG1.1中是这样的。在SVG 2中，显式定义如何计算结果。尽管它没有指定如何处理祖先元素上的三维变换

在Chrome和Firefox上。Chrome似乎已经实现了SVG2定义，但它有一个bug。它没有返回正确的变换矩阵。不过Firefox尚未更新。它不包括祖先元素上的任何转换

---

我现在相信Chrome中的bug是您的示例无法在那里工作的原因。不过，如果你想成为跨浏览器用户，我的建议是自己处理缩放，并调整变换（或坐标），但仍然有效。

Chrome错误报告：哇，谢谢Paul。这比我想象的要复杂得多。感谢您关注核心问题。我认为，如果我只是想办法在拖动SVG点时禁用缩放，这是最简单的。你自己做这件事相当容易。只要SVG有一个

视图框

，缩放所需做的就是改变

宽度

和

高度

属性。你的拖拽应该都能很好地工作。哦？我的用例实际上是用于放大和缩小图像。我没有意识到调整svg视图框（它确实有一个）也可以实现图像缩放。我现在就来试试哦，哇，是的。您需要同时缩放图像。或者将图像放在SVG中。Chrome bug报告如下：哇，谢谢Paul。这比我想象的要复杂得多。感谢您关注核心问题。我认为，如果我只是想办法在拖动SVG点时禁用缩放，这是最简单的。你自己做这件事相当容易。只要SVG有一个

视图框

，缩放所需做的就是改变

宽度

和

高度

属性。你的拖拽应该都能很好地工作。哦？我的用例实际上是用于放大和缩小图像。我没有意识到调整svg视图框（它确实有一个）也可以实现图像缩放。我现在就来试试哦，哇，是的。您需要同时缩放图像。或者将图像放在SVG中。