risksilikon.blogg.se

1. Get mouse coordinates of svg group object javascript how to#
2. Get mouse coordinates of svg group object javascript code#
3. Get mouse coordinates of svg group object javascript free#

Feel free to view the source and learn whatever you can. It supports IE+ASV3, IE+ASV6, and Firefox 1.5. You can see the final demo which allows you to drag around four objects here: Draggable SVG Demo Two. Luckily I was able to find this function from Holger Will and with a small correction to his function to handle percentages in width/height – the function now works beautifully in ASV3. Subsequent to my first publishing this entry, I was informed that ASV 3 doesn’t support getScreenCTM() and someone had already posted a function that would calculate this manually. The reason for this is maybe because the SVG elements are in the SVG namespace but the attributes on those elements are in the null namespace. In using the above technique, it may be more proper to stick the dragx/dragy attributes into their own namespace (in which case I’d have to use getAttributeNS and setAttributeNS methods), but for the purposes of this demo it seems to work just fine. No complicated and expensive scanning of the transform attribute, no delving into the element’s CTM, just pick them up from the DOM and use them.

Var y = parseInt(element.getAttribute(‘dragy’)) Var x = parseInt(element.getAttribute(‘dragx’)) Anyway, if you have one of the above two configurations, you should be able to drag around the circle to your heart’s content. Too bad, hopefully they will before Opera 9 is finally released. Unfortunately it looks like Opera 9 TP1 and ASV 3.0 do not yet support getScreenTCM() on its SVG elements. Supported platforms are Internet Explorer + Adobe SVG Viewer 6.0 Alpha and Firefox 1.5. I used the above technique in a very simple demo here: Draggable SVG Demo One. With that we can determine how the mouse cursor is offset from a given anchor point within the SVG element and properly drag it around. What does that mean? Well, it translates my mouse coordinates into SVG user coordinates for a given SVG element. This takes the clientX and clientY values within the event object (familiar to most HTML/JavaScript coders nowadays) and transforms them using the inverse of the SVG element’s Current Transformation Matrix (CTM). In my investigations, I started with this post by Jonathan Watt on the Yahoo! svg-developers mailing list where he specifies: These are very convenient features to have, yet they do cause some hassle with mapping mouse coordinates to SVG coordinates. This is because in SVG you can change coordinate systems within your SVG document by specifying a viewBox attribute on the top-level element and you can transform SVG entities by scaling, translating, skewing, etc.

the browser’s window) does not necessarily equal the SVG user coordinates. The tricky part of handling mouse events in SVG comes with the fact that the client coordinates (i.e.

Get mouse coordinates of svg group object javascript how to#

Now that you understand how to hook up event handlers, the basics of a dragging operation are:

Get mouse coordinates of svg group object javascript code#

In SVG 1.2 this will change as it uses only DOM Level 3 Events (introducing handlers and listeners), but since there will be some time before SVG 1.2 becomes the defacto standard to code for, SVG 1.1 is it. When the rectangle is clicked on, the JavaScript function buttonClick() will be called which lets you do whatever you want.