[Raphael] 円を表示 ’＆ アニメーション

Raphaelを使ってsvgで円形を表示させてみる

Raphael使って円形で画像切替 - jsdo.it - share JavaScript, HTML5 and CSS

1はただ円を表示させただけ。
2は画像切替のアイデア。オンマウスで枠より大きかった円形を枠内に表示させるように小さくアニメーションした。今回は背景色変えてるだけ。

SVGで画像のマスクなんかできるとさらによさそう。
やってみよう

view plainprint?

1. var paper = Raphael(elem, 100, 100);  
2.   
3. //円要素を作る。引数は中心のx座標、y座標、半径  
4. var cirlce = paper.circle(50, 50, 40);  
5.   
6. //属性追加  
7. circle.attr({  
8.  fill: "white"  
9. });  
10.   
11. //マウスオーバーイベント  
12. circle.mouseover(function(){  
13.  //処理  
14. });  
15.   
16. //マウスアウトイベント  
17. circle.mouseout(function(){  
18.  //処理  
19. });  

var paper = Raphael(elem, 100, 100);

//円要素を作る。引数は中心のx座標、y座標、半径
var cirlce = paper.circle(50, 50, 40);

//属性追加
circle.attr({
 fill: "white"
});

//マウスオーバーイベント
circle.mouseover(function(){
 //処理
});

//マウスアウトイベント
circle.mouseout(function(){
 //処理
});