== 図形のスタイル ==
図形のスタイルの主なものは次の３つです。
* stroke-width 線の太さ
* stroke 線の色
* fill 塗りの色
他に線の端や角の形状、点線にする、不透明度などの指定もできます。<
>
図形に共通な属性と、図形に依存する属性があります。
----
=== 値の指定方法 ===
要素タグ内の属性として与えます。<
>
記述方法は個別に属性を指定する書き方と、style属性にまとめて指定する書き方の２種類があります。
次の２つは同じ意味になります。
.
.
まとめて指定する書き方は css の記述方法と同じです。
----
=== 色の表し方 ===
１）色の名前で指定する
aqua, black, blue, gray, green, lime, maroon, navy, olive, purple, red, silver, white, yellow など
２）６桁の１６進数の並びで指定する
#112233, #ffcc00 のように先頭に#をつけて書きます。
値はR（赤）G（緑）B（青）の順に２桁ずつ並べます。#rrggbbのように対応します。
３）３桁の１６進数の並びで指定する
#d80と書くと#dd8800の意味になります。
４）RGBの値を０〜２５５の１０進数で指定する
rgb(0,100,255) のように書きます。
５）RGBの値を％で指定する
rgb(0%,50%,100%) のように書きます。
----
=== defs要素 ===
styleの指定で同じ内容を何度も記述するのは面倒ですし、間違えやすいですね。<
>
スタイルをあらかじめ'''定義'''して名前をつけておくことができます。
何度も使うスタイルはこうして使うと楽です。
定義はdefs要素内で行います。<
>
defs要素はsvg要素内に<>しか書けません。<
>
}}}
----
=== スタイル定義の書き方 ===
defs内に記述する方法と、スタイルシートファイルに記述する方法の２つがあります。
'''（１）defs内に記述する場合'''
スタイルの定義は style要素のCDATA内に記述します。
書き方はスタイルシート(CSS)と同様です。
{{{
}}}
２行目、５行目はこの通りに書き、その間にスタイルの定義を書きます。
タグ名を指定した定義
タグ名に続けて { と } の間にスタイルを書きます。
{{{
circle { fill: #ffc; stroke:green; stroke-width:2; }
}}}
この定義の後で circle 要素を使うと緑の線、薄い黄色の塗りの円になります。
クラス名を指定した定義
クラス名としては分りやすい名前を指定しましょう。クラス名を定義するには前にピリオドをつけます。スタイルの書き方は同じです。
{{{
.red1 { fill: #f44; stroke:red; stroke-width:2; fill-opacity:0.5;}
}}}
red1という名前のクラスとそのスタイルを定義します。
このスタイルを指定するには
{{{
}}}
のように class属性を使います。
サンプル
{{{
}}}
'''（２）スタイルシートファイルで記述する場合'''
ウエブページにおけるスタイルシートと同様に、SVGにおいてもスタイルを別ファイルで指定することができます。
スタイルの記述が多い場合や、スタイルを共用する場合などに利用すると良いでしょう。
スタイル部分のみを記述し、別ファイルで保存します。
{{{
circle { fill: #0ff; stroke:green; stroke-width:2; }
.red { fill: #f44; stroke:red; stroke-width:2; fill-opacity:0.5;}
}}}
上の内容を style1.css という名前のファイルに保存した場合、これを利用するには ２行目の xml-stylesheet でファイルを次のように指定します。
{{{
}}}