図形のスタイル

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

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