How to add click-and-drag to scale an image in an SVG?

Question

I want to let visitors scale the image using click-and-drag:

<html>
    <body>
        <svg>
            <image>

Is there a JavaScript library that will help me?

I notice Raphael has click and drag methods but I will still have to write a lot of JS to:

Find the corners of the image
Make the area near the corners selectable
Draw icons for the corners so it's obvious they are selectable
Add click, drag and drop to the corners
Update the dimensions of the image

I could do all that but it sounds time-consuming. Is there an open-source script I should use? Other suggestions?

score 5 · Accepted Answer · edited May 23 '17 at 10:34

5

I found this solution at this post: Draggables and Resizables in SVG.

In the answer, you can find a jsfiddle link: http://jsfiddle.net/tmkfs/. You can resize the box by clicking and dragging the corner of the box. Hope this code could help you.

edited May 23 '17 at 10:34

Community

1
1

answered Sep 16 '11 at 15:21

cabreracanal

924
1
14
36

I've also found this https://github.com/cjheath/Raphaelle. A script that allow you to resize by clicking and dragging objects. – cabreracanal Sep 16 '11 at 15:45

score 1 · Answer 2 · edited May 23 '17 at 12:26

Not that I know of. I need to do the same thing and am surprised I haven't found a plugin or even an example of how to do this with Rahpeal.js yet. Since this seems like something a lot of people would want to do with SVG or Rapheal.js I'm suprised there isn't a built in way to do it (I would have thought scale + drag would do this but it wasn't as easy as it would have seemed).

I need this functionality so I've been building it out myself. I ran into a little snag (documented here: Raphael.js drag with scale causes weird jumping behavior) but just got it working. Once I'm finished, I can post my solution in a jsfiddle or on github when I'm done if you would like.

Good to know. Yes please share your solution when you are done. — ram1, Sep 05 '11 at 03:41

score 1 · Answer 3 · answered Sep 15 '11 at 13:42

You should have a look to SvgKit It provides nice library to manipulate - generate svg's including event handling using javascript.

From official documentation:

Additions to the SVGKit object for event handling. In SVG it can be tricky to get from mouse coordinates to local coordinates. SVGEvent has routines to enable draggable items, rotatable items, and to prevent pan and zoom on items.

Event demos is here.

How to add click-and-drag to scale an image in an SVG?

3 Answers3