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

Question

我正在尝试移动位于 HTML 图像中心的 SVG 圆圈。如果您将鼠标放在图像上并拖动圆圈，效果会很好。

但是，如果我缩放图像(点击 codepen 中的 + 按钮)，pageX 和 pageY 到 SVG 的坐标转换就会变得困惑。

我应该如何正确处理这个问题？ (我的完整代码处理 SVG 的触摸和鼠标事件 - 在本示例中我已将其简化为仅鼠标)

我的代码笔:http://codepen.io/pliablepixels/pen/EZxyRN

这是我获取坐标的方法(请参阅 codepen 以获取可运行的示例):

 // map to SVG view so I can move the circle
  function recompute(ax,ay)
  {
   // alert ("Here");
        var svg=document.getElementById('zsvg');
        var pt = svg.createSVGPoint();
        pt.x = ax;
        pt.y = ay;
        var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
        $scope.cx = Math.round(svgP.x);
        $scope.cy = Math.round(svgP.y);


  }

  function moveit(event)
  {

     if (!isDrag) return;
     var status = "Dragging with X="+event.pageX+" Y="+event.pageY;

    $timeout (function(){$scope.status = status; recompute(event.pageX, event.pageY)});
  }

相关的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>

Answer 1

首先，您通常会使用 clientX 和 clientY 而不是 pageX 和 pageY。

其次，您使用的 Ionic(?) zoomTo() 函数正在对容器 div 应用 3D 变换。即。

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

我不期望 getScreenCTM() 处理 3D 转换。即使是实际上是 2D 的，因为它们在 Z 轴上不执行任何操作。

您需要:

1. 以不同的方式进行缩放。 IOW 自己处理它，这样您就可以以 getScreenCTM() 友好的方式完成它。或者直接乘以缩放系数。 或
2. 找到一种方法来获取 Ionic 已应用的变换的详细信息并适当更新变换后的鼠标坐标。

更新:

getScreenCTM() 的定义在 SVG 2 中发生了变化。在 SVG 1.1 中它是 fairly loosely defined 。在 SVG 2 the definition has been updated明确定义如何计算结果。尽管它没有指定应如何处理祖先元素的 3D 变换。

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

我现在相信 Chrome 中的错误是您的示例无法在其中运行的原因。但是，如果您想跨浏览器，我的建议是您自己处理缩放 - 并调整变换(或坐标) - 仍然有效。