seems like a defect, depending on browser zoom level.. raised an issue http://code.google.com/p/chromium/issues/detail?id=81995
--- In [email protected], "babu.sreekanth" <babu.sreekanth@...> wrote: > > 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/
