How can I use Raphael JS to free transform?

Question

I have this SVG square that I want to be able to rotate and drag, how can I use Raphael JS to do this?

This is the SVG i want to manipulate:

<svg width="100" height="100"><rect width="300" height="100" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" /></svg>

Answer 1

Raphael.Freetransform handles dragging, rotating and scaling of individual elements and sets.

 var paper = Raphael('holder');

    var rect = paper
        .rect(200, 200, 100, 100)
        .attr('fill', '#f00');

    // Add freeTransform
    var ft = paper.freeTransform(rect);

    // Hide freeTransform handles
    ft.hideHandles();

    // Show hidden freeTransform handles
    ft.showHandles();

    // Apply transformations programmatically
    ft.attrs.rotate = 45;

    ft.apply();

    // Remove freeTransform completely
    ft.unplug();

    // Add freeTransform with options and callback
    ft = paper.freeTransform(rect, { keepRatio: true }, function(ft, events) {
        console.log(ft.attrs);
    });

    // Change options on the fly
    ft.setOpts({ keepRatio: false });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://alias.io/raphael/free_transform/raphael.js"></script>
<script src="https://alias.io/raphael/free_transform/raphael.free_transform/raphael.free_transform.js"></script>
<div id="holder"></div>