Snap.svg – Getting Started
http://snapsvg.io/start/

サークルを作る

[html]
var s = Snap(“#svg”);
var gloup1;

//Lets create big circle in the middle:
var bigCircle = s.circle(‘50%’,’50%’, 10).attr({fill:”#ca374c”});
var bigCircle2 = s.circle(‘50%’,’50%’, 10).attr({fill:”#7c4e94″});
var bigCircle3 = s.circle(‘50%’,’50%’, 10).attr({fill:”#328eb0″});
var bigCircle4 = s.circle(‘50%’,’50%’, 10).attr({fill:”#28947b”});
[/html]

テキストを入れる

[html]
var text = s.text(150,’50%’,”テキストを入れる”).attr({fill:”transparent”, fontSize:”40px”});
[/html]

グループの作り方

[html]
gloup1 = s.g();
gloup1.add(bigCircle, bigCircle2, bigCircle3, bigCircle4);
[/html]

[html]
//zindexのいじりかた　prependのテスト
var test = s.circle(‘50%’,’50%’, 100).attr({fill:”#fff”});
$(test.node).attr(‘id’,’test’);
$(gloup1.node).attr(‘id’,’gloup1′);
test.prependTo(s);

//s.select(‘#test’).before(s.select(‘#gloup1’));
//s.select(“circle”).before(s.select(“g”));
test.before(gloup1);
[/html]

グループの消し方

[html]
gloup1.remove();
[/html]