resize the group of the SVG element

I am working on a SVG application and now want to let a user resize an object using draggable corners, very much like in SVG-edit (http://svg-edit.googlecode.com/svn开发者_StackOverflow中文版/trunk/editor/svg-editor.html). The functionality should work as follows: The user selects an SVG object, drags it to the main ‘canvas’ and once on the ‘canvas’, four corners on the outside of the object appear, the user can drag on each of the corner points & drag to enlarge the object. The objects will be rectangular in shape and created using paths, not using the SVG ‘rect’ function. Would anyone have any suggestions as to how this should be implemented? Thanks in Advance

This can all be achieved by wrapping the items you are resizing in a g element and then by applying a transform to that element. Lets take the simple case of dragging the lower right corner. You will need to first determine the bounding box of the g element. You can add your mousedown, mousemove, mouseup events to that element or use some placeholder element (like a rectangle) that serves as a handle to drag for re-sizing. One important note here is that if you are tracking using the small shape, bad things are bound to happen. It's easy for the user to drag so fast that the mouse goes outside the shape, thus canceling your drag operation. To get around this, I usually use a transparent shape on top of the entire canvas with point-events turned. I register my mouse tracking events there. This way you can track the mouse without worrying that you'll exit the shape.

So, back to resizing. You'll need to compare your current position to the new position. I would probably use the ratio of the length from the top-left to bottom-right length divided by the length of the top-left and new bottom-right that you are dragging. Now you can construct a transform that scales the g element by that amount. However, things get a little tricky here and this may be were you having difficulties. First you need to translate the top-left corner to the origin, then scale, then translate the origin back. This will give the effect of the top-left corner remaining in its current location while resizing the rest of the g element's content.

HTH, Kevin