On Sat, 20 Nov 2010 16:37:57 +0100, Kenneth N <[email protected]> wrote:
> --- In [email protected], Holger Jeromin <mailgm...@...> > wrote: >> >> Narendra Sisodiya schrieb am 20.11.2010 05:36: ... >> offsetX is only available in opera, safari, chrome. >> layerX is available in safari, chrome, firefox >> clientx is available in all: opera, chrome, safari, firefox and adobe >> svg viewer >> pageX is available in all browsers (no adobe plugin) and is independant >> from the scrolling. >> >> But the problem is still that the offset of >> document.getElementById("grid") compared to the page is apparently not >> available. This is really suprising to me. I have not found a solution. ... > Thank you for your response. Another difference I just noticed is that > Safari responds to the onclick handler if anywhere in the viewBox is > clicked Sounds like a Safari bug to me. The event must have a target element inside the g element to be able to hit the g element (through event bubbling) since the g itself has no geometry that can be clicked. > whereas Firefox and Opera require you to click right on one of the > lines, so this is a separate problem to fix. This ought to be one of the first things tought in SVG courses, "event shields / event capturing regions" - just put a rect inside the g element where you want the events to be captured. Or since you have a simple grid, put the eventlistener on the root element and then check the coordinates to see which gridsquare was hit. Using your examples it could look like this for example: ... <g id="grid" style="stroke: black" stroke-width=".02"> <rect width="10" height="10" fill="white"/> <!-- horizontal lines --> <line x1="0" y1="0" x2="10" y2="0" /> ... > And Opera's responses using offsetX/Y appear to be complete garbage! Note: the spec that defines offsetX/Y and pageX,Y is still in an unstable state (working draft), http://www.w3.org/TR/cssom-view/. ClientX,Y is the only pair that is defined in a stable w3c specification (DOM Level 2 Events), http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent. I'm pretty sure that the coordinate system of offsetX/Y are not in svg user units of the target element (unless it's the root element possibly), so if you're looking for that then you will have to convert them anyway. > Anyway, I'm still open to ideas and offer links to the original version > (offsetXY) as well as links to versions using clientXY and pageXY. > > http://tinyurl.com/offsetXY-svg > http://tinyurl.com/clientXY-svg > http://tinyurl.com/PageXY-svg Here are a few blogposts of mine that deal with the coordinate-space conversions you are struggling with: http://my.opera.com/MacDev_ed/blog/2010/02/01/how-to-get-all-svg-elements-intersected-by-a-given-rectangle http://my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg http://my.opera.com/MacDev_ed/blog/2009/01/21/getting-boundingbox-of-svg-elements I tend to go with clientX,Y since there are built-in methods[1][2] that allow rather easy transformation (ok, i would like it to be easier still, but it's not that hard to hide the tricky bits in a script utility function) to the right coordinate space, see e.g the example in the second example above. Unless you expect document scrolling or if you have svg inline inside an (X)HTML document then clientX,Y should be sufficient for all cases. A combination (or an alternative [3]) can be used for the other cases. In general if you have a viewBox and your viewport (defined by the container, usually html/css) is not using the same aspect ratio then you will need to transform coordinates. Cheers /Erik [1] http://www.w3.org/TR/SVG11/types.html#InterfaceSVGLocatable [2] http://www.w3.org/TR/SVG11/coords.html#InterfaceSVGMatrix [3] http://xn--dahlstrm-t4a.net/svg/examples/FixedPositionGroupInScript.svg -- Erik Dahlstrom, Core Technology Developer, Opera Software Co-Chair, W3C SVG Working Group Personal blog: http://my.opera.com/macdev_ed ------------------------------------ ----- 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/
