Click Event Coordinates In Svg

This HTML containing SVG:

Solution 1:

I've added to your code a function to detect the mouse position in SVG.

let svg = document.querySelector('svg')

functionclicked(event) {
  let m = oMousePosSVG(event);
    console.log(m.x,m.y);
}

svg.addEventListener("click", clicked)


functionoMousePosSVG(e) {
      var p = svg.createSVGPoint();
      p.x = e.clientX;
      p.y = e.clientY;
      var ctm = svg.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}

svg{border:1px solid}

<divclass="container"><divclass="spacer"></div><svg><gid="polygonGroup"transform="translate(80, 50)"><polygonpoints="-60,-10 -35,-30 -10,-10 -10,30 -60,30"></polygon><polygonpoints="10,-10 35,-30 60,-10 60,30 10,30"></polygon><polygonclass="origin"points="-4,0 0,4 4,0 0,-4"></polygon></g><gid="textGroup"transform="translate(80, 50)"fill="red"><textx="-35"y="10">Text</text><textx="35"y="10">Text</text></g></svg></div>

To read more about mouse detection in SVG I recommend this book: Using SVG with CSS3 and HTML5: Vector Graphics for Web Design

I hope it helps.

Share