【Raphael.js】エレメントをグラデーションで塗る方法

エレメントにグラデーションで色を塗る方法です。色を塗る方法は、

でも触れたattr関数を使用します。単一色の塗りに関しては

で書いてますので確認してくださいね！

グラデーションは独特の記法が必要になりますので、少し癖があったりします。再生ボタンで実行！

グラデーションは単一色を塗るfillと同じ属性を使います。その属性値でグラデーションを表現するのですが、表現方法は大きく分けて二つ、リニアグラデーションか、ラディカルグラデーションです。

リニアグラデーションは直線でグラデーションする方法です。もっとも簡単なグラデーションはこちら。

paper.rect(10,10,100,100).attr({fill:"90-#fff-#000"});

翻訳すると、「90度の垂直方向に、#FFF(白)から始まって#000(黒)で終わるグラデーションを描け！」という感じです。開始地点や終了地点は微調整することも出来ます。

paper.rect(120,10,100,100).attr({fill:"90-#fff:20-#000"});

これは「90度の垂直方向に、スタート地点から20%を超えたあたりから#FFF(白)で塗り始め、#000(黒)で終わるグラデーションを描け！」という事になります。

paper.rect(230,10,100,100).attr({fill:"90-#fff:20%-#000:80%"});

単位を書いた方が分かりやすい方はこういう書き方をした方がいいでしょう。これは80%の位置を黒の塗りのゴールにしてますね。

いわゆる円形グラデーションです。リニアグラデーションで角度を指定していた部分を"r"にするだけでOKです。

paper.circle(175,195,50).attr({fill:"r#fff:10%-#000:50%"});

グラデーションの開始地点を調整することもできます。

paper.circle(285,195,50).attr({fill:"r(0.2,0.2)#fff-#000"});

この場合は、「グラデーションの起点をエレメント全体の縦横20%の位置にして円形グラデーションを描け！」という事になります。

V2.0ではどうもそんな感じみたいです。全く塗が実行されません。

Element.attr( {fill:"gradient"} );