Как я могу использовать Raphael JS для свободного преобразования?

Question

У меня есть этот квадрат SVG, который я хочу, чтобы иметь возможность вращаться и перетаскивать, как я могу использовать Raphael JS для этого?

Это SVG я хочу, чтобы манипулировать:

<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 обрабатывает перетаскивание, вращение и масштабирование отдельных элементов и множеств.

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>