図形のスタイル

図形のスタイルの主なものは次の３つです。

stroke-width 線の太さ
stroke 線の色
fill 塗りの色

他に線の端や角の形状、点線にする、不透明度などの指定もできます。
図形に共通な属性と、図形に依存する属性があります。

値の指定方法

要素タグ内の属性として与えます。
記述方法は個別に属性を指定する書き方と、style属性にまとめて指定する書き方の２種類があります。

次の２つは同じ意味になります。

<rect x="0" y="0" width="50" height="50" stroke="black" fill="none" />
<rect x="0" y="0" width="50" height="50" style="stroke:black; fill:none;" />

まとめて指定する書き方は 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要素内に１つしか書けません。
<svg>タグまたは<title>要素のすぐ後に記述します。

 <?xml version="1.0" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="200" height="200">
 <title>sample1</title>
 <defs>
  定義はここに書く
 </defs>
 図形描画の記述
 </svg>

スタイル定義の書き方

defs内に記述する方法と、スタイルシートファイルに記述する方法の２つがあります。

（１）defs内に記述する場合

スタイルの定義は style要素のCDATA内に記述します。書き方はスタイルシート(CSS)と同様です。

 <defs>
 <style type="text/css"><![CDATA[
     circle { fill: #ffc; stroke:green; stroke-width:2; }
     .red { fill: #f44; stroke:red; stroke-width:2; fill-opacity:0.5;}
 ]]></style>
 </defs>

２行目、５行目はこの通りに書き、その間にスタイルの定義を書きます。

タグ名を指定した定義

タグ名に続けて { と } の間にスタイルを書きます。
```
 circle { fill: #ffc; stroke:green; stroke-width:2; }
```
この定義の後で circle 要素を使うと緑の線、薄い黄色の塗りの円になります。

クラス名を指定した定義

クラス名としては分りやすい名前を指定しましょう。クラス名を定義するには前にピリオドをつけます。スタイルの書き方は同じです。
```
 .red1 { fill: #f44; stroke:red; stroke-width:2; fill-opacity:0.5;}
```
red1という名前のクラスとそのスタイルを定義します。このスタイルを指定するには
```
 <circle cx="10" cy="10" r="10" class="red1" />
```
のように class属性を使います。

サンプル

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200">
  <title>sample1</title>
<defs>
<style type="text/css"><![CDATA[
    circle { fill: #ffc; stroke:#2f2; stroke-width:2; }
    .red { fill: #f44; stroke:none; fill-opacity:0.5;}
]]></style>
</defs>
  <circle cx="50" cy="100" r="25" />
  <circle cx="100" cy="100" r="30" style="fill:none; stroke:blue;" />
  <rect x="40" y="40" width="150" height="50" class="red" />
</svg>

（２）スタイルシートファイルで記述する場合

ウエブページにおけるスタイルシートと同様に、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 でファイルを次のように指定します。

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="style1.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200">
  <title>sample1</title>
  <circle cx="50" cy="100" r="25" style="fill:black; stroke:none;" />
  <rect x="40" y="40" width="150" height="50" class="red" />
  <line x1="10" y1="50" x2="100" y2="200" style="stroke:red;" />
    <circle cx="100" cy="100" r="30" />
</svg>

図形のスタイル (最終更新日時 2008-08-21 11:57:59 更新者 masahiko)