【Raphael.js】エレメントの透明度色々

opacity属性

透明度を変更するには属性でopacityの値を決めるだけでOKです。0から1の値を入れることで、透明度を変更できます。1であれば完全不透明で、0であれば何も見えなくなります。他に"fill-opacity"属性や"stroke-opacity"属性などもあり、塗だけの透明度や境界線の透明度だけを変更する事も出来ます。

実行結果

解説

透明度は色指定時にrgbaなどでアルファ値を入力する事で調整する事も出来ます。また、境界線のみの透明度を指定した場合、少しかっこ悪い事になります。これは境界線の中心線がエレメントの輪郭を通っている為です。綺麗に見せるには別々のエレメントとして描画してやるしかないかと。

Element.attr(opacity:number);

• Element: 透明化対象となるRaphaelエレメント
• number: ０～1の数値でエレメントの透明度を指定する
• 返り値: 透明化処理後のエレメント

Element.attr("fill-opacity":number);

• Element: 透明化対象となるRaphaelエレメント
• number: ０～1の数値でエレメントの塗りの透明度を指定する
• 返り値: 透明化処理後のエレメント

Element.attr("stroke-opacity":number);

• Element: 透明化対象となるRaphaelエレメント
• number: ０～1の数値でエレメントの境界線の透明度を指定する
• 返り値: 透明化処理後のエレメント