2015/11/11
rgbcolor.jsで16進数⇔rgb()の色の変換を簡単にできる
私の場合、CSSの色の指定はほとんどの場合”#f6f6f6″のような16進数による指定を行っています。
jQueryでも、cssやanimateで色の指定をする場合、16進数により指定しています。
また、IllustratorでSVGを書き出した場合、fillやstrokeのような色の指定は16進数により行われています。
通常はこのことになんの問題もないのですが、
アニメーションをjQueryで実装する場合に、色の計算を直接しなくてはならない場合、
16進数の指定のままでは扱いにくいため、rgb形式に変換する必要があります。
最新のブラウザの多くでは、
インラインSVG内の要素のアニメーションの手段としてCSS3のtransitionやanimationを使うことができます。
しかしながらIEでは、SVG内の要素にCSSでアニメーションの指定をしても、動作させることができません。
そのため、jQueryなどを使い、
色の計算を直接行うことで、SVGのアニメーションを実装しなくてはならない場合があります。
そんなときに役立つのが、
rgbcolor.jsというJavaScriptのプラグインです。
↓公式サイト
RGB color parser in JavaScript / Stoyan’s phpied.com
使い方は↓こちらのサイトでわかりやすい説明をされています。
こちらを使えば、
|
1 | var color = new RGBColor("#DFB73A"); |
や
|
1 | var color = new RGBColor("rgb(255, 0, 255)"); |
のように色を任意の形式で指定することで、
|
1 2 3 4 5 | var red = color.r; //rgbの赤色を取得 var green = color.g; //rgbの緑色を取得 var blue = color.b; //rgbの青色を取得 var rgb = color.toRGB(); //rgb形式に変換 var hex = color.toHex(); //16進数形式で取得 |
上記のように柔軟に色の情報を変換・取得することができます。
↓こちらはそれを応用してSVGのアニメーションを実装してみたDEMOです。
用途は幅広いと思いますので、是非ご利用下さい。
Author Profile
SHARE
