Не удалось получить точные xy-координаты указателя мыши в svg (по метке пути)

Question

Я разрабатываю одно веб-приложение на основе Cordova. У меня есть несколько шаблонов SVG. Я хочу нарисовать путь между пользовательскими точками , когда пользователь нажимает на экран. Я не могу получить точные координаты XY , когда пользователь нажимает на теге пути внутри SVG . Но когда пользователь нажимает на основном пространстве 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, он будет вытягивать боковой экран. это означает, что координаты 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

 }

выходное изображение-