Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the click coordinates relative to SVG element holding the onclick listener?

I haven't been able to calculate the click coordinates (x and y) relative to the element triggering the event. I have not found an easy example online.

I have a simple svg (with 100px left margin) in an HTML page. It contains a group (translated 30px 30px) which has an onclick listener attached. And inside that group I have a rect with 50px width and height.

After I click any part of the group element, I get an event object with coordinates relative to the HTML page (evt.clientX and evt.clientY).

What I need to know is where exactly the user clicked inside the group element (the element holding the onclick listener).

How do I convert clientX and clientY coordinates to the group element coordinates. So say, if I click the top leftmost part of the rect it should give me x=0 and y=0.

Here is currently what I have:

<!DOCTYPE html>  <html>      <head>          <style>              body{                  background:black;              }              svg{                  fill:white;                  background:white;                  position: absolute;                  top:100px;                  left:100px;              }                        </style>          <script>              function clicked(evt){                  alert("x: "+evt.clientX+" y:"+evt.clientY);              }          </script>      </head>      <body>          <div>              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">                  <g transform="translate(30 30)" onclick="clicked(evt)">                      <rect x="0" y="0" width="50" height="50" fill="red"/>                  </g>              </svg>                </div>      </body>  </html>
like image 729
oabarca Avatar asked Mar 25 '15 16:03

oabarca


1 Answers

Tolokoban's solution has the limitation that it doesn't work if your viewBox deviates from the default, that is if it is different from viewBox="0 0 width height". A better solution that also takes viewBox into account is this:

var pt = svg.createSVGPoint();  // Created once for document  function alert_coords(evt) {     pt.x = evt.clientX;     pt.y = evt.clientY;      // The cursor point, translated into svg coordinates     var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());     console.log("(" + cursorpt.x + ", " + cursorpt.y + ")"); } 

(Credit goes to Smerk, who posted the code)

If the viewBox is not set or set to the default, this script will return the same values as Tolokoban's script. But if you have an SVG like <svg width="100px" height="100" viewBox="0 0 200 200">, only this version will give you the correct results.

like image 97
Alexander Jank Avatar answered Sep 20 '22 06:09

Alexander Jank