Menu
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>
729
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.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
