无法在 svg 中获得鼠标指针的精确 xy 坐标（在路径标记上）

Posted 2023-03-28

【中文标题】无法在 svg 中获得鼠标指针的精确 xy 坐标（在路径标记上）

【英文标题】：Not able to get exact xy-coordinates of mouse pointer in svg(on path tag)

【发布时间】：2018-12-14 16:37:05

【问题描述】：

我正在开发一个基于 cordova 的 Web 应用程序。我有一些 svg 模板。我想在用户点击屏幕时绘制用户点之间的路径。当用户单击 svg 内的路径标记 时，我无法获得准确的 xy 坐标。但是，当用户点击 主 svg 空间时，它的工作正常。请给我任何想法或解决方案。请检查下面的代码-

这是一个 svg 模板代码-

<div style="height:82vh">
   <p style="text-align:center;margin:0px;padding-top:10px"> Ground Floor</p>

     <svg id="final" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
  viewBox="0 0 950 430" onclick="testsetNavigationPath(evt)">

  <defs>
    <filter id="dropshadow">
      <feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="50" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>

  <g id="gFinal" transform="matrix(0.72,0,0,-0.72,13,720)" >
    <g transform="scale(0.1,0.1)" id="g12">
      <path id="parking01".../>
    .
    .
    .
    .
  </g>
  </g>
  </svg>

和这是js代码-

   function testsetNavigationPath(evt) 
     debugger

    var e = document.getElementById('body');
    var scope = angular.element(e).scope();
    var svg = document.getElementById('final');
    NS = svg.getAttribute('xmlns');

    var
       t = evt.target,
       x = evt.clientX,
       y = evt.clientY,
       target = (t == svg ? svg : t.parentNode),
       svgP = svgPoint(target, x, y),
       circle = document.createElementNS(NS, 'circle');

       console.log("click coordinates"+  Math.round(svgP.x)  + ","+ Math.round(svgP.y));
        circle.setAttributeNS(null, 'cx', Math.round(svgP.x));
        circle.setAttributeNS(null, 'cy', Math.round(svgP.y));
        circle.setAttributeNS(null, 'r', 10);
        target.appendChild(circle);
        scope.check = parseInt(scope.check) + 1;

      if(parseInt(scope.check)<= 1)
          pathAttr = 'M ' + Math.round(svgP.x) + ' ' + Math.round(svgP.y);
          scope.dPath = scope.dPath + pathAttr;
         
    else
       pathAttr = ' L ' + Math.round(svgP.x) + ' ' + Math.round(svgP.y);
       scope.dPath = scope.dPath + pathAttr;
       

    if(parseInt(scope.check) > 3)
    testnavigateFromHome(scope.dPath);// this function draw the path based on points.
    

   

   //**getting svg coordinates**
   function svgPoint(element, x, y) 
      var svg = document.getElementById('final')
      var pt = svg.createSVGPoint();
      pt.x = x;
      pt.y = y;
     return pt.matrixTransform(element.getScreenCTM().inverse());

    

这张图片显示当用户点击主 svg 空间时它工作正常。 但用户点击 svg path ，它会画出侧屏。这意味着 xy 坐标在路径标记上不准确。所以它指向一些地方。这第二张图片 -

【参考方案1】：

终于我得到了解决方案。现在我在 svg 内的任何地方动态绘制路径。不是通过目标元素创建坐标，而是通过 svg 主标签获取 -

 function svgPoint(element, x, y) 
 var svg = document.getElementById('final')
 var pt = svg.createSVGPoint();
 pt.x = x;
 pt.y = y;
 return pt.matrixTransform(svg.getScreenCTM().inverse());// dont use target  element 
 here

 

输出图片-