【Raphael.js】属性とは？

attr関数

今まで散々、図形や線を描いてきましたが、今日は属性についてです。属性と難しく書きましたが、スタイルや装飾だと考えてもらえばOK。例えば、描画オブジェクトの透明度や境界線、塗の色などなどが属性にあたります。属性のコントロールにはattr関数を使います。ひとくちに属性と言っても、その種類は豊富なので、じっくり覚えましょう。

実行結果

例えばこんなことができます。再生ボタンで実行！

解説

グラデーションや透明度、境界線の太さなどを変えています。ひとまずここではattr関数というものでスタイルをいじくれる！という事だけ覚えておきましょう。attr関数はjavascriptの連想配列を引数とします。書き方としては

{ 属性1 : 属性1の値, 属性2 : 属性2の値, ... }

という感じです。基本的に属性は ” (ダブルクォーテーション)で囲む必要はありませんが、属性名に - (ハイフン)が入っている場合は囲んでやる必要がありますので、囲む習慣をつけておいた方がいいかもしれません。

Element.attr( {array} );

• Element: 描画したRaphaelエレメント
• array: 属性と値を格納した連想配列