図形のスタイル

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

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>