Raphael.js, how to choose an item?

Question

In Raphael, js, how can I select an item? For example, if I have a rectangle, how do I select it? In Raphael, is there a way to select an element, such as selecting a DOM element using jQuery?

Answer 1

To select the svg DOM element, assuming that the node element of the raphael element has an identifier, you can do this in jQuery mode on $('#ID') or in the native way document.getElementById('ID') .

In addition, using raphael processing events is very simple, for example, when you click on a rectangle, you can “select” it this way (demo here => http://jsfiddle.net/steweb/zMYU8/ ):

Markup

 <div id="canvas"></div> 

Js

 var selected = null; //var to store selected element //initialize the raphael canvas and store it in a var var canvas = Raphael(document.getElementById("canvas"), 320, 200); //first rectangle var r = canvas.rect(10, 10, 50, 50).attr("fill", "#FFFF22"); //second rectangle var r1 = canvas.rect(70, 70, 50, 50).attr("fill", "#FFFF22"); //first rectangle click r.click(function(){ //change attributes r1.attr("stroke","black"); r.attr("stroke","green"); selected = r; //update selected var }); //second rectangle click r1.click(function(){ //change attributes r.attr("stroke","black"); r1.attr("stroke","green"); selected = r1; //update selected var });