In Raphael,js, how can I select an element? For example, If I have an rectangular, how to select it? In Raphael, is there any way to select element like the selection of DOM element using jQuery?

In Raphael,js, how can I select an element? For example, If I have an rectangular, how to select it? In Raphael, is there any way to select element like the selection of DOM element using jQuery?

• javascript
• dom-events
• raphael

Share Improve this question Follow edited Sep 11, 2020 at 10:19 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 10, 2011 at 8:53 LeemLeem 18.3k3939 gold badges112112 silver badges164164 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

To select an svg DOM element, supposing a node of the raphael element has an ID, you can do it in the 'jQuery' mode by $('#ID') or in the 'native' way document.getElementById('ID').

Moreover, using raphael handling events is very simple, for example when you click on a rectangle you can 'select' it, in this way (demo here => http://jsfiddle/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
});