hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

Snap.svgテストしたときのメモ

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]


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください