How do I manipulate an image in an SVG, using mouse actions?

Question

I have:

<html>
    <body>
        <svg>
            <image x="0" y="0" width="5px" height="5px" xlink:href="myimage.png">

How do I let the visitor use click-and-drag actions to scale the image and adjust its placement within the SVG?

UPDATE: I noticed Raphael has click and drag methods so that solves the placement part of my question. How do I let users scale the image? Plan: find the corners of the image, make the area near them selectable & draggable, and use those vectors to update the image dimensions.

UPDATE 2: I got it working! I made some polygons in Raphael and scaled the images with basic vector math.

Answer 1

Take look at code in this link . It's almost exactly what you need.

This link is even better :)

How do I manipulate an image in an SVG, using mouse actions?

Question

1 answers

solution1
2 ACCPTED 2011-11-17 18:33:59

How do I manipulate an image in an SVG, using mouse actions?

Question

1 answers

solution1 2 ACCPTED 2011-11-17 18:33:59

solution1
2 ACCPTED 2011-11-17 18:33:59