Question

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

但是，如果我缩放图像（点击编码板中的+按钮），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()函数将3D变换应用于容器div。即

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

我不希望getScreenCTM()处理3D变换。即使是那些有效的2D，因为它们在Z轴上什么都不做。

您需要：

以不同的方式进行缩放。我自己处理它，所以你可以getScreenCTM()友好的方式做到这一点。或者直接乘以缩放系数。或
找到一种方法来获取Ionic已应用的变换细节并适当更新变换后的鼠标坐标。

<强>更新

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

I have experimented a little。看来Chrome已经实现了SVG2定义，但它有一个bug。它没有返回正确的变换矩阵。但Firefox尚未更新。它不包括祖先元素的任何变换。

我现在相信Chrome中的错误是您的样本无法在那里工作的原因。但是，如果你想成为跨浏览器，我自己处理变焦的建议 - 并调整变换（或坐标） - 仍然有效。

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

1 个答案: