Hello, Please see the example at http://jsfiddle.net/DgMDV/1/
sample output: offset based on svg x:12 y:34 mouse click based on screen x:22 y:38 mouse coord based on svg x:10 y:4 The above sample output is generated when i click on the rectangle on the top-left corner. As far as I understood, getScreenCTM interface provides the transformation matrix for the element (svg here). I got it as the first line. Second line indicate the mouse coordinate based on the screen coordinate. When I apply the transformation matrix to the mouse click, I expect the point will be translated to svg coordinate. That value is the 3 rd line above. I am not sure that it is corrct. The rectangle has a y coordinate 10, and the click event is only availbake within the rectangle. So how could the mouse coord based on svg go below 10?? thanks, bsr. ========== <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en"> <head> </head> <body> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <h1>sdsd</h1> <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; version="1.1" baseProfile="full" height="200"> <g fill="none" stroke="black" stroke-width="1" > <!-- Draw the axes of the original coordinate system --> <line x1="0" y1=".5" x2="400" y2=".5" /> <line x1=".5" y1="0" x2=".5" y2="150" /> </g> <g > <rect class="drag resize" x="10" y="10" width="100" height="50" fill="#c66" /> </g> </svg> <h2 id="op"></h2> <script type="text/javascript" src="vb.js"></script> </body> </html> ============ vb.js ========== var svg = document.getElementsByTagName('svg')[0]; var svgNS = svg.getAttribute('xmlns'); var pt = svg.createSVGPoint(); var el1 = document.getElementsByTagName('rect')[0]; var log_svgcursorPoint, log_mouseclick, log_mousecoord; function svgcursorPoint(evt){ pt.x = evt.clientX; pt.y = evt.clientY; var a = svg.getScreenCTM(); log_svgcursorPoint = "offset based on svg"+ " x:" + a.e +" y:" + a.f; var b = a.inverse(); return pt.matrixTransform(b); }; (function(el){ el.addEventListener('mousedown',function(e){ log_mouseclick = "mouse click based on screen"+ " x:" + e.clientX +" y:" + e.clientY ; var svgmouse = svgcursorPoint(e); log_mousecoord = "mouse coord based on svg"+ " x:" + svgmouse.x +" y:" +svgmouse.y; document.getElementById('op').innerHTML = log_svgcursorPoint + "<br>" + log_mouseclick + "<br>" + log_mousecoord; },false); })(el1); ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
