1

図形のスタイル

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

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


値の指定方法

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

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

まとめて指定する書き方は css の記述方法と同じです。


色の表し方

1)色の名前で指定する

2)6桁の16進数の並びで指定する

3)3桁の16進数の並びで指定する

4)RGBの値を0〜255の10進数で指定する

5)RGBの値を%で指定する


defs要素

styleの指定で同じ内容を何度も記述するのは面倒ですし、間違えやすいですね。
スタイルをあらかじめ定義して名前をつけておくことができます。 何度も使うスタイルはこうして使うと楽です。

定義はdefs要素内で行います。
defs要素はsvg要素内に1つしか書けません。
<svg>タグまたは<title>要素のすぐ後に記述します。


スタイル定義の書き方

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

(1)defs内に記述する場合

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

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

タグ名を指定した定義

クラス名を指定した定義

サンプル

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

(2)スタイルシートファイルで記述する場合

ウエブページにおけるスタイルシートと同様に、SVGにおいてもスタイルを別ファイルで指定することができます。

スタイルの記述が多い場合や、スタイルを共用する場合などに利用すると良いでしょう。

スタイル部分のみを記述し、別ファイルで保存します。

circle { fill: #0ff; stroke:green; stroke-width:2; }
.red { fill: #f44; stroke:red; stroke-width:2; fill-opacity:0.5;}

上の内容を style1.css という名前のファイルに保存した場合、これを利用するには 2行目の 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>