【Raphael.js】エレメントを単一色で塗る方法

fill属性

エレメントに色を塗る方法です。色を塗る方法は、 【Raphael.js】属性とは？ - RAPHAELISTでも触れたattr関数を使用します。今回は単純な単一色の色塗りを実践です。

実行結果

単一色なので超シンプル。再生ボタンで実行！

解説

塗りつぶしはfill属性を使用します。ここではテキストとrectエレメントに対して塗りを実行しています。特筆することは特にありませんが、色指定に変な値をセットすると以下のようなことが起きたりします。これは後述。

それはさておき、単一色での塗りも、様々な方法があります。代表的なものですと、カラーネーム("red"など)やカラーコード("#FF0000" or "#F00" など)指定。他にもRGB色空間やHSB名前空間などといったものも実装されています。特にRGBやHSB名前空間などは、塗の透明度をアルファ値で調整できたりしますので、使い勝手はいいかもしれません。そこはお好みで。

色指定されていないのに塗られる？

”くまもん”というテキストに”1”という色が指定されていますが、実際にこのような色表現はありません。誤りです。しかし、実際には白色で塗られています。どうも、直前で"red"や"white"など、カラーネームで指定されているものがある場合はその設定を拝借してくるみたいです。"#f00"という色表現はスルーする模様。

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

• Element: 描画したRaphaelエレメント
• color: 'red'や'#f00'などのカラー色指定文字列