デザイナーTweet私の場合、CSSの色の指定はほとんどの場合”#f6f6f6′′のような16進数による指定を行っています。jQueryでも、cssやanimateで色の指定をする場合、16進数により指定しています。IllustratorでSVGを書き出した場合、fillやstrokeのような色の指定は16進数により行われています。通常はこのことになんの問題もないのですが、アニメーションをjQueryで実装する場合に、色の計算を直接しなくてはならない場合、16進数の指定のままでは扱いにくいため、rgb形式に変換する必要があります。最新のブラウザの多くでは、インラインSVG内の要素のアニメーションの手段としてCSS3のtransitionやanimationを使うことができます。IEでは、SVG内の要素にCSSでアニメーションの指定をしても、動作させることができません。色の計算を直接行うことで、SVGのアニメーションを実装しなくてはならない場合があります。そんなときに役立つのが、rgbcolor.jsというJavaScriptのプラグインです。phpied.com使い方は↓こちらのサイトでわかりやすい説明をされています。上記のように柔軟に色の情報を変換・取得することができます。↓こちらはそれを応用してSVGのアニメーションを実装してみたDEMOです。DEMO用途は幅広いと思いますので、是非ご利用下さい。ProfileninomiyaWebデザイナー兼コーダーです。イラストを描くのも好きです。SVGとCanvasを使ったWEBアプリにも興味があります。投稿一覧SearchRanking1Y!mobileメール(@yahoo.ne.jp)とyahooメール(@yahoo.co.jp)2経費削減!無料で古紙・段ボールを持って行ってくれる業者まとめ3最新AndroidOSをインストール出来るカスタムROMのススメ4知らなかった...CSSでテキストの両端揃えが普通にできた5JavaScriptでCSSを操作する方法6画像のフォントが何かを調べる方法7目標達成用紙(マンダラート)のGoogleスプレッドシートつくりました。