Multiple Canvas in ScaleRaphael - circle in 2nd canvas appears in 1st - raphael

Question

I just got started with Raphael, but I don't get it right to make multiple canvases in ScaleRaphael
(I#m using this to make the site after responsive > are there alternatives for that?
Multiple ScaleRaphael Canvases: http://jsfiddle.net/karo/gMyP5/13/
or full view: http://jsfiddle.net/karo/gMyP5/13/embedded/result/
A strange thing happens here.
The red circle should be in the 2nd div but if you look in the code with eg. firebug in the fullview then you see that both svgs are in the inside a Why is that?
Do you have any idea for me?
Thanks Kaor
my code:
HTML
<div id="wrapper">
<div id="paper"></div>
<br>
<div id="paper2"></div>
</div>
JavaScript:
var paper = new ScaleRaphael("paper",200,200);
var circle = paper.circle(100, 100, 60).attr({fill:'red'});
var paper2 = new ScaleRaphael("paper2",200,200);
var circle2 = paper2.circle(50, 50, 30).attr({fill:'black'});
function resizePaper(){
var win = $(this);
paper.changeSize(win.width(), win.height(), true, false);
paper2.changeSize(win.width(), win.height(), true, false);
}
resizePaper();
$(window).resize(resizePaper);
CSS
#wrapper
{
position:relative;
}
#paper {
background-color: lightgray;
width:100%;
height:200px;
position:relative!important;
}
#paper2
{
background-color: orange;
width:100%;
height:100px;
position:relative!important;
}
svg
{
position:absolute!important;
top:0;
left:0;
}

Answer 1

ScaleRaphael only supports one canvas. In the code you can see it re-referencing the first existing svggroup or vmlgroup element.
You do not need ScaleRaphael to do what you are doing. Since version 2 Raphael has included Paper.setViewBox and it always included Paper.setSize, which together do this already.

Answer 2

I found an issue and a workaround how it works....
Have a look here: http://jsfiddle.net/karo/r4qvt/12/
I have first the paper div and then the red div
<div id="paper"></div>
<div id="red"></div>
</div>
</div>
And if I make the redpaper for the div "red" and the rectangle in it before I make the paperGrey and "talk to the" first div. THEN IT WORKS
var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});
var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});
If I do it the OTHER WAY ROUND IT DOESNT WORK
var paperGrey = new ScaleRaphael("paper",400,200);
var circle = paperGrey.circle(40, 140, 60).attr({fill:'blue'});
var redpaper = new ScaleRaphael("red",300,200);
redpaper.rect(0, 0, 250, 100).attr({fill:'red'});
...strange, but I found a solution ;)