Question

我正在开发一个基于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" width="82vw" height="78vh"
  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坐标在路径标签上不准确。所以它指出了一些地方。第二张图片-

Answer 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

 }

输出图像-

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

1 个答案: