Raphael JS test 3

Test on element transform

by Jayson Buquia

HTML

<div id="svg2"></div>

SCSS

#svg2 {
    background: #eee;
}

JavaScript

var paper = Raphael(document.getElementById('svg2'),'100%',500);

paper.circle(80,80,50).attr({
    fill : 'r(0.3,0.3)#ff8-orange-80:red',
    stroke : '0'
})


var set1 = paper.set();

set1.push(
    paper.ellipse(80,80,50,50),
    paper.ellipse(80,80,45,50),
    paper.ellipse(80,80,35,50),
    paper.ellipse(80,80,20,50),
    paper.ellipse(80,80,5,50)
).attr({transform : 'r15,80,80'});

// another

var set2 = paper.set().push(
    paper.ellipse(80,80,50,50),
    paper.ellipse(80,80,45,50),
    paper.ellipse(80,80,35,50),
    paper.ellipse(80,80,20,50),
    paper.ellipse(80,80,5,50)
).attr({transform : 'r105,80,80'});

paper.set().push(
    set1,set2,paper.path('m30,80 h100').attr({transform:'r15,80,80'})
).attr({
    fill : 'transparent',
    stroke : 'rgba(0,0,0,0.3)',
    'stroke-width' : 1
});