A.1 色スタイル

色スタイルには、塗りの色、ストロークの色またはその両方が含まれます。

形状またはジオメトリに適用された場合、塗りの色(存在する場合)は形状の内側の塗りに使用され、ストロークの色(存在する場合)は形状の境界の描画に使用されます。どちらの色でも、その色の透明度を制御するアルファ値を使用できます。

色スタイルでは、<g>要素のclass属性を"color"に設定する必要があります。<g>要素には、色コンポーネントおよびそのオプションのアルファ値を指定したstyle属性を含める必要があります。次に例を示します。

• <g class="color" style="fill:#ff0000">: 塗りの色(RGB値は#ff0000)のみの色スタイルが指定されます。

• <g class="color" style="fill:#ff0000;stroke:blue">: 塗りの色およびストロークの色(青)の色スタイルが指定されます。

色の値は、16進文字列(#00ff00など)、またはblack、blue、cyan、darkGray、gray、green、lightGray、magenta、orange、pink、red、white、yellowの色名のいずれかを使用して指定できます。

色スタイルの透明度を指定するには、fill-opacityおよびstroke-opacityの値を0(ゼロ、完全な透明)から255(不透明)の範囲内で指定できます。次の例では、半透明の塗りコンポーネントを指定しています。

<g class="color" style="fill:#ff00ff;fill-opacity:128">

次の例では、ストロークおよび塗りの不透明度を指定しています。

<g class="color" style= "stroke:red;stroke-opacity:70;
                          fill:#ff00aa;fill-opacity:129">

style属性の構文は、1つ以上のname:valueのペアをセミコロンで区切った文字列です。(この基本構文は、他のタイプのスタイルでも使用されます。)

ストローク色については、ストロークの幅を定義できます。形状の境界を描画するときのデフォルトのストローク幅は、1ピクセルです。デフォルトを変更するには、stroke-width:valueペアをstyle属性文字列に追加します。次の例では、ストローク幅を3ピクセルに指定しています。

<g class="color" style="stroke:red;stroke-width:3">