CODEWITHSUNDEEP
javascripthtmlcssindexingraphael
Bob-ob
Bob-ob

Reputation: 1618

Raphael JS: bring set to front

I was hoping someone could tell me how to bring an entire set of elements toFront in Raphael JS.

I am working with some dynamically generated sets of raphael elements, each of which is stored in an array making it easier to interact with and target individual sets. When a user interacts with the various sets I would like to be able to bring the full set to the front of the application.

I have tried using .toFront() as outlined here: http://raphaeljs.com/reference.html#Element.toFront

However this hasn't worked properly. Each set contains either a circle or a circle sector, a text element and either an additional circle or an additional sector.

Any ideas? At any one point a user may have up to 40/50 of these sets so bringing sets to front is going to be a necessity regardless.

Upvotes: 2

Views: 2041

Answers (1)

Aukhan
Aukhan

Reputation: 481

i've had similar issues with the toFront() function ... well i'd say there are two ways to do it ... The first one (not quite recommended) apply a loop on all the elements of the set to bring them to front but still they'd be ordered according to the sequence in the set .... not good approach ... set.forEach(el){ e.toFront();}

The second one is really sexy :) my fav :) beautifully explained by mister phrogz here

I recommend using the 'g' tag ... simple javascript . let all your sets be enclosed in a g tag 

var mySet = document.createElementNS("http://www.w3.org/2000/svg", "g");
mySet.setAttribute('id','myset');
//should look something like this
//use jQuery append or javaScript appendChild to add your set elements to this group
<g id = 'myset'>
      <rect>
      <circle>
      //etc etc
    </g>

now 

       mySet.parentNode.appendChild(mySet); //the key line

this would simply take it to the bottom of the svg container, hence being drawn last and shown at the top according to the painters model also mentioned by mister phrogz in the link .... you could use javascript to manipulate your own z-index if required...

Upvotes: 2

Related Questions