SVG カラー

ホーム

4D v20 R7

SVGコンポーネント

カラー&グラデーション

SVG カラー

カラーの定義について

SVGはCSS2仕様で定義されているカラーの代理シンタックスを認識する事ができます。4D SVGコンポーネントのコマンドはこれらのシンタックスを全てサポートしています。

カラーは、以下のどちらかの形式によって表現することができます:

RGB フォーマット
フォーマット 例
#rgb #f00
#rrggbb #ff0000
rgb(r,g,b) rgb(255,0,0)
rgb(100%, 0%, 0%)

"Color" キーワードフォーマット
SVG はたくさんのカラー名(例えば"red"など)のキーワード名を受け付けることができます。

キーワードの一覧と、それに対応するRGBの値は、4D SVG Constantsテーマ内の、SVGカラー(カラー名) およびSVGカラー(RGB) にまとめてあります。この一覧を表示して、4D SVGカラーパレット経由で直接カラー値を表示・挿入させることもできます。この点についてのより詳細な情報に関しては、開発ツールの章を参照して下さい。

None キーワード

backgroundColor あるいは foregroundColor 引数に"none" キーワードを渡すことで、塗りカラーもストロークカラーもなしにすることができます。この"none" キーワードは大部分のSVG コマンドで使用可能です。

不透明度

コンポーネントコマンドのカラー式において、不透明度を指定することができます。"color:opacity"というシンタックスを使用して指定します。このときopacityには0(無色)から100(完全に不透過のカラー)の値を渡す事ができます。つまり"red:50"という値は透過度50%の赤色、と解釈されます。

グラデーション

グラデーションとは、ヴェクターを用いた先進的なカラーの遷移です。これらのグラデーションはSVG_Define_linear_gradient コマンドとSVG_Define_radial_gradient コマンドを使用して設定することができます。設定がなされた後は、そのグラデーションは"url(#GradientName)"シンタックスを用いて使用する事ができます。

同様に、SVG_Define_solidColor コマンドを用いて透過度もカスタムのカラーを設定することができます。

参照

SVG_Define_linear_gradient
SVG_Define_radial_gradient
SVG_Define_solidColor
SVG_SET_OPACITY
開発ツール