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">