svg 要素
元の画像の表示範囲と HTML での表示領域の幅と高さを定義する。
SVG の場合は、左上隅が原点 (0, 0) になる。水平方向は右へ行くにつれて、垂直方向は下に行くほどそれぞれ値が増大する。
属性
（注）meet、slice のときはさらに xMin（左端寄せ）、xMid（中央寄せ）、xMax（右端寄せ） と YMin（上段寄せ）、YMid（中段寄せ）、YMax（下段寄せ） とを組み合わせたものと一緒に指定する。
１３ グラフィックス（SVG）
１３．１ Scalable Vector Graphics (svg)
Scalable Vector Graphics（以下 SVG）は XML をベースとしたテキストベースの画像表現形式です。
SVG は PNG などの一般的な画像形式と異なり、ベクトルデータとして画像を表現します。このため、概念上は「画像サイズ」というものが存在しません。SVG では画像は平面上に無限に広がっており、その特定の場所に図形を配置しているだけと考えます。
そのため、HTML 文書などに画像を表示する場合は、svg 要素に viewbox、および width、height という属性が用意されており、表示範囲（viewbox）と表示領域のサイズ（width、height）が指定できるようになっています。
viewBox 属性は、元の画像の左上の X 座標と Y 座標、そして幅と高さを指定します。そして、width、height 属性でその画像を HTML 上に表示する表示領域の幅と高さを定義します。
なお、SVG は XML として定義されています。XML では内容のあるタグは必ず開始タグ（<tag>）と終了タグ（</tag>）とでその内容を挟んで記述します（HTML と同じ）。そして、内容を持たないタグも終了タグを必要としていないということを明示しなければなりません。具体的には、開始タグの終わりを /> で閉じる必要があります（HTML と異なる）。
例えば、終了タグがない circle タグは次のように記述します。
<circle cx="100" cy="100" r="80"/> ← /> でタグを閉じる
ただし、（終了タグのある）開始タグを閉じるのは、HTML と同じ > です。/> ではありませんので、間違えないようにしてください。
（１） viewbox 属性
元の画像の表示したい範囲を、その範囲の X 座標、Y 座標、幅、高さの順に、空白もしくはカンマ（,）で区切って指定します。
例えば、次のように座標(50,50) 半径(40) の円が描かれていた場合、そのどこを範囲にするかによって表示される画像が変わります。
例えば、左上から 縦横とも40ずつ（黄色い枠）切り取って表示すると次のようになります。
記述例
<svg viewbox="0,0 40 40" width="40" height="40"> <circle cx="50" cy="50" r="40" fill="lime" stroke="black" stroke-width="1"/> </svg>
以下の表示例では、分かりやすいように svg の表示領域（width、height）を枠で囲っています。
表示例
右半分（青い枠）を切り取って表示すると次のようになります。
記述例
<svg viewbox="50,0 50 100" width="50" height="100"> <circle cx="50" cy="50" r="40" fill="lime" stroke="black" stroke-width="1"/> </svg>
以下の表示例では、分かりやすいように svg の表示領域（width、height）を枠で囲っています。
表示例
（２） width 属性、height 属性
元の画像から切り取った範囲を描く表示領域の幅と高さを指定します。切り取った範囲と、幅や高さを変えることによって拡縮することができます。
そのとき、どのような方法で拡縮するかは preserveAspectRatio 属性で指定します。
例えば、(1) の最初の画像全体を幅 200、高さ 50 （元の画像の横２倍縦半分）で表示すると次のようになります。preserveAspectRatio ="none" は、切り取った画像の縦横比を維持しないで、表示領域に画像全体を表示することを指示しています。
<svg viewbox="0,0 100 100" width="200" height="50" preserveAspectRatio="none"> <circle cx="50" cy="50" r="40" fill="lime" stroke="black" stroke-width="1"/> </svg>
以下の表示例では、分かりやすいように svg の表示領域（width、height）を枠で囲っています。
表示例
（３） preserveAspectRatio 属性
SVG で画像を表示しようとしたときに、元の画像と表示しようとする領域とでサイズが異なる場合、何らかの方法で拡縮が必要になります。この方法を指定するのが preserveAspectRatio 属性です。
拡縮には３つの方法があり、これらと画像の拡縮の基準を表す xMinYMin～xMaxYMax とを組み合わせることで拡縮処理を定義します。
| 属性値 | 説明 |
|---|---|
| none | 縦横比は維持されず、元の画像が表示領域いっぱいに表示される |
| meet | 縦横比は維持されつつ、元の画像が表示領域にすべて表示される |
| slice | 縦横比は維持されつつ、縦か横を表示領域の最大限に広げる （一部ははみ出ることになる。はみ出た部分は表示されない） |
記述例
<svg viewbox="0 0 200 200" width="75" height="50" preserveAspectRatio="xMinYMin meet"> <circle cx="100" cy="100" r="80" fill="lime" stroke="black" stroke-width="1"/> </svg>
以下の表示例では、分かりやすいように svg の表示領域（width、height）を枠で囲っています。また、svg 要素の width、height、preserveAspectRatio は以下のようにいろいろ変更して表示しています。
表示例
| 縦横比は維持されず、拡縮して全体を表示 <svg viewbox="0 0 200 200" width="75" height="50" preserveAspectRatio="none"> | ||||||
縦横比を維持し拡縮して全体表示 <svg viewbox="0 0 200 200" width="50" height="75" preserveAspectRatio="????? meet"> | ||||||
|
xMinYMin 上段寄せ |
xMinYMid 中段寄せ |
xMinYMax 下段寄せ |
????? に左の文字列を記述 | |||
<svg viewbox="0 0 200 200" width="75" height="50" preserveAspectRatio="????? meet"> | ||||||
|
xMinYMin 左端寄せ |
xMidYMin 中央寄せ |
xMaxYMin 右端寄せ |
????? に左の文字列を記述 | |||
縦横比を維持し、縦か横を表示領域の最大限に広げる（一部ははみ出るがはみ出た部分は表示されない） <svg viewbox="0 0 200 200" width="50" height="75" preserveAspectRatio="????? slice"> | ||||||
|
xMinYMin 左端寄せ |
xMidYMin 中央寄せ |
xMaxYMin 右端寄せ |
????? に左の文字列を記述 | |||
<svg viewbox="0 0 200 200" width="75" height="50" preserveAspectRatio="????? slice"> | ||||||
|
xMinYMin 上段寄せ |
xMinYMid 中段寄せ |
xMinYMax 下段寄せ |
????? に左の文字列を記述 | |||
（４） xmlns、xmlns:xlink 属性
xmlns="http://www.w3.org/2000/svg" は、svg 要素内の要素はすべて SVG であることを宣言します。また、xmlns:xlink="http://www.w3.org/1999/xlink" は、svg 要素内でリンクが xmlns:xlink 属性であることを宣言しています。
ただし、記述しなくても多くのブラウザは正しく動きますので、この後の例では多くの場合省略してあります。ただし、一部のブラウザは記述がないと表示されないこともありますので、その場合は正しく記述してください。
１３．２ 属性
線の種類や色などを変更するための属性、および図形を変形するための属性について説明します。
１３．２．１ 色
参考：Web カラー一覧
| カラーネーム | １６進数 |
|---|
SVG では、HTML と同じく、色を名称や１６進数で指定することができます。
また、特別な色として、塗らないことを指示する none や transparent、親要素の色を継承する inherit があります。
（１） 線の色 (stroke)
stroke 属性は、線、テキストまたは要素の輪郭の色を定義します。
stroke 属性
線、テキストまたは要素の輪郭の色を定義する。
ただし、水平、垂直方向のグラデーションは表示されない。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stroke | 線の色（規定値：無色） | × | |
| #rrggbb | 赤緑青、各色16進数2ケタ | ||
| カラーネーム | 代表的ない色に付けられた名称（Web カラー一覧 参照） | ||
| url(#ID) | グラデーションを定義した linearGradient 要素や radialGradient 要素の ID パターンを定義した pattern 要素の ID | ||
記述例
<svg viewbox="0 0 600 140" width="600" height="140"> <line x1="30" y1="20" x2="170" y2="20" stroke="black"/> <line x1="30" y1="50" x2="170" y2="50" stroke="#0000FF"/> <circle cx="230" cy="40" r="30" stroke="red"/> <text x="20" y="100" font-size="32" stroke="green">文字列</text> <defs> <linearGradient id="g0"> <stop offset="0.2" stop-color="red"/> <stop offset="0.8" stop-color="violet"/> </linearGradient> </defs> <!-- 水平、垂直だとなぜか表示されないので、y2 に小数点以下の数値をつけている --> <line x1="300" y1="20" x2="400" y2="20.01" stroke-width="20" stroke="url(#g0)"/> <line x1="400" y1="20" x2="500" y2="20" stroke-width="20" stroke="url(#g0)"/> <!-- 表示されない --> </svg>
表示例
.svg "stroke")
注意
水平（y1 と y2 が同じ）、垂直（x1 と x2 が同じ）のグラデーションは表示されないようです。
表示するには、上の例のようにどちらかに小数点以下の数値をつければ良いようです。
（２） 面の色 (fill)
fill 属性は、面の色を定義します。つまり、塗りつぶす色を定義します。
fill 属性
塗りつぶす面の色を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| fill | 塗りつぶす面の色（規定値：黒） | × | |
| #rrggbb | 赤緑青、各色16進数2ケタ | ||
| カラーネーム | 代表的ない色に付けられた名称（Web カラー一覧 参照） | ||
| url(#ID) | グラデーションを定義した linearGradient 要素や radialGradient 要素の ID パターンを定義した pattern 要素の ID | ||
記述例
<svg viewbox="0 0 200 100" width="200" height="100"> <rect x="30" y="20" width="140" height="50" fill="blue"/> <circle cx="150" cy="40" r="30" stroke="red" fill="none"/> <text x="20" y="80" font-size="32" fill="green">文字列</text> <defs> <linearGradient id="g0"> <stop offset="0.2" stop-color="red"/> <stop offset="0.8" stop-color="violet"/> </linearGradient> </defs> <rect x="200" y="20" width="80" height="50" fill="url(#g0)"/> </svg>
表示例
.svg "fill")
１３．２．２ 不透明度
（１） 線の不透明度 (stroke-opacity)
stroke-opacity 属性は、線の色の不透明度を定義します。
stroke-opacity 属性
線、テキストまたは要素の輪郭の不透明度を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stroke-opacity | 0 ～ 1 | 線の不透明度 0（透明）～ 1（不透明）（規定値：1） | × |
記述例
<svg viewbox="0 0 300 120" width="300" height="120"> <rect x="40" y="10" width="20" height="99" fill="red" /> <rect x="60" y="10" width="20" height="99" fill="blue" /> <rect x="80" y="10" width="20" height="99" fill="green" /> <line x1="20" y1="20" x2="80" y2="20" stroke-width="20" stroke="yellow" stroke-opacity="0" /> <line x1="20" y1="40" x2="80" y2="40" stroke-width="20" stroke="yellow" stroke-opacity="0.2" /> <line x1="20" y1="60" x2="80" y2="60" stroke-width="20" stroke="yellow" stroke-opacity="0.4" /> <line x1="20" y1="80" x2="80" y2="80" stroke-width="20" stroke="yellow" stroke-opacity="0.6" /> <line x1="20" y1="100" x2="80" y2="100" stroke-width="20" stroke="yellow" stroke-opacity="0.8" /> <line x1="150" y1="17" x2="200" y2="103" stroke-width="40" stroke="red" stroke-opacity="0.4" /> <line x1="200" y1="17" x2="150" y2="103" stroke-width="40" stroke="blue" stroke-opacity="0.4" /> <line x1="125" y1="60" x2="225" y2="60" stroke-width="40" stroke="green" stroke-opacity="0.4" /> </svg>
表示例
.svg "stroke-opacity")
（２） 面の不透明度 (fill-opacity)
fill-opacity 属性は、面の色の不透明度を定義します。
fill-opacity 属性
塗りつぶす面の不透明度を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| fill-opacity | 0 ～ 1 | 面の不透明度 0（透明）～ 1（不透明）（規定値：1） | × |
記述例
<svg viewbox="0 0 300 120" width="300" height="120"> <rect x="40" y="10" width="20" height="99" fill="red" /> <rect x="60" y="10" width="20" height="99" fill="blue" /> <rect x="80" y="10" width="20" height="99" fill="green" /> <rect x="20" y="10" width="80" height="20" fill="yellow" fill-opacity="0" /> <rect x="20" y="30" width="80" height="20" fill="yellow" fill-opacity="0.2" /> <rect x="20" y="50" width="80" height="20" fill="yellow" fill-opacity="0.4" /> <rect x="20" y="70" width="80" height="20" fill="yellow" fill-opacity="0.6" /> <rect x="20" y="90" width="80" height="20" fill="yellow" fill-opacity="0.8" /> <circle cx="175" cy="40" r="30" fill="red" fill-opacity="0.4" /> <circle cx="158" cy="70" r="30" fill="blue" fill-opacity="0.4" /> <circle cx="192" cy="70" r="30" fill="green" fill-opacity="0.4" /> </svg>
表示例
.svg "fill-opacity")
（３） 不透明度 (opacity)
opacity 属性は、図形全体の不透明度を定義します。
opacity 属性
図形全体の不透明度を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| opacity | 0 ～ 1 | 図形全体の不透明度 0（透明）～ 1（不透明）（規定値：1） | × |
線の色や面の色の不透明度を個別に変えた上で、全体の不透明度をさらに 0.5 としています。g 要素は図形をグループ化するために使用しています。
記述例
<svg viewbox="0 0 300 120" width="300" height="120"> <g opacity="0.5"> <rect x="40" y="10" width="20" height="99" fill="red" /> <rect x="60" y="10" width="20" height="99" fill="blue" /> <rect x="80" y="10" width="20" height="99" fill="green" /> <line x1="20" y1="20" x2="80" y2="20" stroke-width="20" stroke="yellow" stroke-opacity="0" /> <line x1="20" y1="40" x2="80" y2="40" stroke-width="20" stroke="yellow" stroke-opacity="0.2" /> <line x1="20" y1="60" x2="80" y2="60" stroke-width="20" stroke="yellow" stroke-opacity="0.4" /> <line x1="20" y1="80" x2="80" y2="80" stroke-width="20" stroke="yellow" stroke-opacity="0.6" /> <line x1="20" y1="100" x2="80" y2="100" stroke-width="20" stroke="yellow" stroke-opacity="0.8" /> <circle cx="175" cy="40" r="30" fill="red" fill-opacity="0.4" /> <circle cx="158" cy="70" r="30" fill="blue" fill-opacity="0.4" /> <circle cx="192" cy="70" r="30" fill="green" fill-opacity="0.4" /> </g> </svg>
表示例
.svg "opacity")
１３．２．３ 線種
線の太さや種類を設定します。
（１） 線の太さ (stroke-width)
stroke-width 属性は、線の太さを定義します。
stroke-width 属性
線の太さを定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stroke-width | 整数 | 線の太さ（規定値：1） | × |
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <line x1="30" y1="10" x2="270" y2="10" stroke="blue" stroke-width="1"/> <line x1="30" y1="30" x2="270" y2="30" stroke="blue" stroke-width="5"/> <line x1="30" y1="50" x2="270" y2="50" stroke="blue" stroke-width="10"/> <line x1="30" y1="80" x2="270" y2="80" stroke="blue" stroke-width="20"/> </svg>
指定された座標を中央に線が引かれます。下の例では、分かりやすいように指定された座標で幅１の黄色い破線を引いています。
表示例
.svg "stroke-width")
（２） 線の両端の形状 (stroke-linecap)
stroke-linecap 属性は、線の両端の形状を定義します。
stroke-linecap 属性
線の両端の形状を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stroke-linecap | 線の両端の形状 | × | |
| butt | 線の両端に何もつかない（そのまま）（規定値） | ||
| round | 線の両端に、直径が線の幅と同じとなる半円が付く | ||
| square | 線の両端に、線の半分の幅となる矩形が付く | ||
記述例
<svg viewbox="0 0 200 100" width="200" height="100"> <line x1="30" y1="20" x2="170" y2="20" stroke="blue" stroke-width="20" stroke-linecap="butt"/> <line x1="30" y1="40" x2="170" y2="40" stroke="blue" stroke-width="20" stroke-linecap="round"/> <line x1="30" y1="60" x2="170" y2="60" stroke="blue" stroke-width="20" stroke-linecap="square"/> </svg>
両端にライン・キャップが付きます。下の例では、分かりやすいように本来の幅で黄色い破線を引いています。
表示例
.svg "stroke-linecap")
（３） 線の頂点の形状 (stroke-linejoin、stroke-miterlimit)
stroke-linecap 属性は、線の頂点の形状を定義します。
stroke-linejoin 属性
線の頂点の形状を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stroke-linejoin | 線の頂点の形状 | × | |
| miter | 鋭角（そのまま）（規定値） | ||
| round | 円形 | ||
| bevel | 面取り（カット） | ||
記述例
<svg viewbox="0 0 400 180" width="400" height="180"> <polyline points="20,20 80,20 100,50 120,20 180,20" stroke="blue" stroke-width="20" fill="none" stroke-linejoin="miter"/> <polyline points="20,70 80,70 100,100 120,70 180,70" stroke="blue" stroke-width="20" fill="none" stroke-linejoin="round"/> <polyline points="20,120 80,120 100,150 120,120 180,120" stroke="blue" stroke-width="20" fill="none" stroke-linejoin="bevel"/> </svg>
頂点の形状を指定しています。
表示例
a.svg "stroke-linejoin")
stroke-miterlimit 属性は、stroke-linejoin="miter" のときの、鋭角な頂点を面取りする閾値を定義します。
stroke-miterlimit 属性
stroke-linejoin="miter" のときの、鋭角な頂点を面取りする閾値を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stroke-miterlimit | １以上の数値 | stroke-linejoin="miter" のとき、鋭角すぎるとき面取りする閾値（規定値：4） （頂点が為す角度から計算された値が指定された値より大きいと面取りされる） | × |
記述例
<svg viewbox="0 0 400 180" width="400" height="180"> <polyline points="20,20 80,20 100,50 120,20 180,20" stroke="blue" stroke-width="20" fill="none" stroke-linejoin="miter" stroke-miterlimit="1"/> <polyline points="20,70 80,70 100,100 120,70 180,70" stroke="blue" stroke-width="20" fill="none" stroke-linejoin="miter" stroke-miterlimit="1.802"/> <polyline points="20,120 80,120 100,150 120,120 180,120" stroke="blue" stroke-width="20" fill="none" stroke-linejoin="miter" stroke-miterlimit="1.803"/> </svg>
stroke-miterlimit を指定して面取りをしています。一番上は３か所すべての頂点が面取りされていますが、真中は下向きの頂点だけです。
表示例
b.svg "stroke-miterlimit")
（４） 破線パターン (stroke-dasharray、stroke-dashoffset)
stroke-dasharray 属性は、破線パターン（直線と空白の長さ）を定義します。この破線パターンを繰り返して線が引かれます。
stroke-dasharray 属性
線の破線パターンを定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stroke-dasharray | 空白区切りのピクセル値 | 直線を引く長さと引かない長さの繰り返し（規定値：none） | × |
記述例
<svg viewbox="0 0 500 100" width="500" height="100"> <line x1="30" y1="10" x2="170" y2="10" stroke="blue"/> <line x1="30" y1="20" x2="170" y2="20" stroke="blue" stroke-dasharray="2 4"/> <line x1="30" y1="30" x2="170" y2="30" stroke="blue" stroke-dasharray="10 4"/> <line x1="30" y1="40" x2="170" y2="40" stroke="blue" stroke-dasharray="2 4 10 4"/> <line x1="30" y1="50" x2="170" y2="50" stroke="blue" stroke-dasharray="2 2 2 4 10 4"/> </svg>
破線パターンを指定して描いています。
表示例
a.svg "stroke-dasharray")
stroke-dashoffset 属性は、破線パターンの開始位置を定義します。指定された位置の破線パターンから描きます。
stroke-dashoffset 属性
破線パターンの開始位置を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stroke-dashoffset | ピクセル値 | 破線パターンの開始位置（規定値：0） | × |
記述例
<svg viewbox="0 0 200 60" width="200" height="60"> <line x1="30" y1="10" x2="170" y2="10" stroke="blue" stroke-dasharray="20 5"/> <line x1="30" y1="20" x2="170" y2="20" stroke="blue" stroke-dasharray="20 5" stroke-dashoffset="5"/> <line x1="30" y1="30" x2="170" y2="30" stroke="blue" stroke-dasharray="20 5" stroke-dashoffset="10"/> <line x1="30" y1="40" x2="170" y2="40" stroke="blue" stroke-dasharray="20 5" stroke-dashoffset="15"/> <line x1="30" y1="50" x2="170" y2="50" stroke="blue" stroke-dasharray="20 5" stroke-dashoffset="20"/> </svg>
すべての線は 20 引いて 5 引かないの繰り返しです。ただし、、その繰り返しの開始を 5 ずつずらして描いています。
表示例
b.svg "stroke-dashoffset")
１３．２．４ 変形 (transform)
図形に対して平行移動や回転などの変形（座標変換）が適用できます。transform の属性値として次の関数を指定することができます。
関数は、空白またはコンマ(,)区切りで複数指定できますが、左側（先に書かれた方）から順に座標軸に適用されていきます。
transform 属性
平行移動や回転などの変形をする際に使用し、matrix 以外の関数を組み合させることもできる。
また、それらの関数、あるいは関数の組み合わせを１つの matrix 関数で置き換えることもできる。
関数
| 関数名 | 説明 | matrix |
|---|---|---|
| translate(tx, ty) | 平行移動 | matrix(1, 0, 0, 1, tx, ty) |
| scale(sx, sy) | 拡大・縮小 | matrix(sx, 0, 0, sy, 0, 0) |
| rotate(a, cx, cy) | 回転 | matrix(cos(a), sin(a), -sin(a), cos(a), -cx*cos(a)+cy*sin(a)+cx, -cx*sin(a)-cy*cos(a)+cy) |
| skewX(ax) | 横方向の傾斜 | matrix(1, 0, tan(ax), 1, 0, 0) |
| skewY(ay) | 縦方向の傾斜 | matrix(1, tan(ay), 0, 1, 0, 0) |
| matrix(a, b, c, d, e, f) | 変換行列による変形 |
（１） 平行移動 (translate)
平行移動を表す関数で、指定した値の分だけ座標軸をその方向にずらします。
translate(tx, ty) 関数
平行移動に使用する。
matrix(1, 0, 0, 1, tx, ty) と記述することもできる。
| 1 | 0 | tx | ||
| 0 | 1 | ty | ||
| 0 | 0 | 1 |
引数
| 引数名 | 引数値 | 説明 | 必須 |
|---|---|---|---|
| tx | 数値 | X 座標方向の移動量 | ○ |
| ty | 数値 | Y 座標方向の移動量（規定値：0） | × |
<svg viewbox="-10 -10 200 100" width="200" height="100"> <rect x="10" y="10" width="100" height="50" stroke="blue" fill="none" transform="translate(40,20)" /> </svg>
座標軸を X軸方向に 40、Y軸方向に 20移動させています。
グレイの線が、移動前の図形や座標軸です。うすい青い線が移動後の座標軸です。理解の助けになるように別途描いています。
表示例
（２） 拡大・縮小 (scale)
拡大・縮小を表す関数で、指定した値の分だけ座標軸方向に拡縮します。
scale(sx, sy) 関数
拡大・縮小に使用する。
matrix(sx, 0, 0, sy, 0, 0) と記述することもできる。
| sx | 0 | 0 | ||
| 0 | sy | 0 | ||
| 0 | 0 | 1 |
引数
| 引数名 | 引数値 | 説明 | 必須 |
|---|---|---|---|
| sx | 数値 | X 座標方向の倍率 | ○ |
| sy | 数値 | Y 座標方向の倍率（規定値：sx） | × |
図形ではなく、座標軸を拡縮します。結果として、図形の開始位置は座標軸から遠くなったり近くなったりしますし、図形の線も軸方向に太くなったり細くなったりします。また、倍率としてマイナスの数値を指定すると図形の反転もできます。
<svg viewbox="-120 0 400 200" width="400" height="200"> <circle cx="50" cy="50" r="40" stroke="blue" fill="none" transform="scale(3,1.5)" /> <path d="M10,110 l80,50 l-100,0 z" stroke="blue" fill="none" transform="scale(-1,1)" /> </svg>
円は X軸方向に 3倍、Y軸方向に 1.5倍しています。線の太さも同じように拡縮しますので、注意が必要です。
三角は X軸方向に -1倍していますので、結果として反転します。
グレイの線などは、拡縮前の図形です。理解の助けになるように別途描いています。
表示例
（３） 回転 (rotate)
回転を表す関数で、座標軸を指定した値の分だけ回転します。またその際の回転の中心を設定することができます。
rotate(angle, cx, cy) 関数
回転に使用する。
matrix(cos(angle), sin(angle), -sin(angle), cos(angle), -cx*cos(angle)+cy*sin(angle)+cx, -cx*sin(angle)-cy*cos(angle)+cy) と記述することもできる。
| cos(angle) | -sin(angle) | -cx*cos(angle)+cy*sin(angle)+cx | ||
| sin(angle) | cos(angle) | -cx*sin(angle)-cy*cos(angle)+cy | ||
| 0 | 0 | 1 |
引数
| 引数名 | 引数値 | 説明 | 必須 |
|---|---|---|---|
| angle | 角度（度） | 回転角度（時計回りが正）単位は指定できない | ○ |
| cx | 数値 | 回転の中心の X 座標（規定値：0） | × |
| cy | 数値 | 回転の中心の Y 座標（規定値：0） | × |
回転の中心を指定しないと座標の原点を中心に回転します。
<svg viewbox="-120 -20 400 200" width="400" height="200"> <rect x="10" y="10" width="100" height="50" stroke="blue" fill="none" transform="rotate(45)" /> </svg>
グレイの線は、回転前の図形と座標軸です。うすい青い線は回転後の座標軸です。理解の助けになるように別途描いています。
表示例
回転の中心を指定するとそれを中心に回転します。次の例は矩形の対角線の交点を中心にして45度回転しています。座標軸が回転していることに注意してください。
<svg viewbox="-100 -4 0 400 180" width="400" height="180"> <rect x="10" y="10" width="100" height="50" stroke="blue" fill="none" transform="rotate(45,60,35)" /> </svg>
グレイの線は、回転前の図形と座標軸です。うすい青い線は回転後の座標軸です。理解の助けになるように別途描いています。
表示例
（４） 横方向の傾斜 (skewX)
横方向の傾斜を表す関数で、Y 軸を指定した角度だけ傾けます。
skewX(angle) 関数
横方向の傾斜に使用する。
matrix(1, 0, tan(angle), 1, 0, 0) と記述することもできる。
| 1 | tan(angle) | 0 | ||
| 0 | 1 | 0 | ||
| 0 | 0 | 1 |
引数
| 引数名 | 引数値 | 説明 | 必須 |
|---|---|---|---|
| angle | 角度（度） | 傾斜角度（X 軸の正方向が正） | ○ |
<svg viewbox="-40 -20 400 140" width="400" height="140"> <circle cx="50" cy="50" r="40" stroke="blue" fill="none" transform="skewX(30)" /> </svg>
グレイの線は、傾斜前の座標軸や図形です。うすい青い線は傾斜後の座標軸です。理解の助けになるように別途描いています。
表示例
（５） 縦方向の傾斜 (skewY)
縦方向の傾斜を表す関数で、X 軸を指定した角度だけ傾けます。
skewY(angle) 関数
縦方向の傾斜に使用する。
matrix(1, tan(angle), 0, 1, 0, 0) と記述することもできる。
| 1 | 0 | 0 | ||
| tan(angle) | 1 | 0 | ||
| 0 | 0 | 1 |
引数
| 引数名 | 引数値 | 説明 | 必須 |
|---|---|---|---|
| angle | 角度（度） | 傾斜角度（Y 軸の正方向が正） | ○ |
<svg viewbox="-40 -20 400 160" width="400" height="160"> <circle cx="50" cy="50" r="40" stroke="blue" fill="none" transform="skewY(30)" /> </svg>
グレイの線は、傾斜前の座標軸や図形です。うすい青い線は傾斜後の座標軸です。理解の助けになるように別途描いています。
表示例
（６） 変換行列による変形 (matrix)
移動・拡縮・傾き・回転を一度に行います。
matrix(a, b, c, d, e, f) 関数
移動・拡縮・傾き・回転を一度に行う。
matrix の引数と行列の関係は次のようになる。
| a | c | e | ||
| b | d | f | ||
| 0 | 0 | 1 |
translate、scale、rotate、skewX、skewY の各関数は matrix 関数で記述することができる。
複数の関数を指定した場合は、それぞれの行列の積で求まる値が matrix 関数の引数になる。
引数
| 引数名 | 引数値 | 説明 | 必須 |
|---|---|---|---|
| a | 数値 | X軸方向の伸縮 | ○ |
| b | 数値 | Y軸方向の傾き | ○ |
| c | 数値 | X軸方向の傾き | ○ |
| d | 数値 | Y軸方向の伸縮 | ○ |
| e | 数値 | X軸方向の移動 | ○ |
| f | 数値 | Y軸方向の移動 | ○ |
transform="translate(20, 50) rotate(-30, 10, 25)" と同様な変形を matrix で行うと次のようになります。
<svg viewbox="-50 -20 400 180" width="400" height="180"> <rect x="40" y="40" width="100" height="40" stroke="blue" fill="none" transform="matrix(0.866025, -0.5, 0.5, 0.866025, 8.83975, 58.3494)" /> </svg>
translate(20, 50) は matrix(1, 0, 0, 1, 20, 50)
rotate(-30, 10, 25) は matrix(cos(-π/6), sin(-π/6), -sin(-π/6), cos(-π/6), -10*cos(-π/6)+25*sin(-π/6)+10, -10*sin(-π/6)-25*cos(-π/6)+25)
です。 これを行列の積で表すと
| * |
| |||||||||||||||||||||||||||||||
| = |
| ||||||||||||||||||||||||||||||||
| = |
| ||||||||||||||||||||||||||||||||
グレイの線は、変形前の図形と座標軸です。うすい青い線は translate を行った場合の図形と座標軸です。理解の助けになるように別途描いています。
表示例
関数の組み合わせ時の注意
関数を組み合わせた場合はその順番によって変形後の図形が変わります。
次の例は、先に平行移動させてから回転させています。
<svg viewbox="-60 -30 400 150" width="400" height="150"> <rect x="10" y="10" width="100" height="40" stroke="blue" fill="none" transform="translate(40,20) rotate(45,60,35)" /> </svg>
グレイの線は、変形前の図形と座標軸です。うすい青い線は translate を行った後の図形と座標軸です。理解の助けになるように別途描いています。
表示例
次の例は、先に回転させてから平行移動させています。
<svg viewbox="-70 -40 400 180" width="400" height="180"> <rect x="10" y="10" width="100" height="40" stroke="blue" fill="none" transform="rotate(45,60,35) translate(40,20)" /> </svg>
グレイの線は、変形前の図形と座標軸です。うすい青い線は rotate を行った後の図形と座標軸です。理解の助けになるように別途描いています。
rotate 後は X 軸、Y 軸の方向が回転していることに注意してください。
表示例
１３．３ 図形
１３．３．１ 矩形 (rect)
矩形を作成するために使用します
rect 要素
矩形を作成する際に使用する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| x | 数値 | 左上の X 座標（規定値：0） | × |
| y | 数値 | 左上の Y 座標（規定値：0） | × |
| width | 数値 | 矩形の幅 | ○ |
| height | 数値 | 矩形の高さ | ○ |
| rx | 数値 | 矩形の角を丸めるために用いられる楕円の X 軸半径の長さ（規定値：0） | × |
| ry | 数値 | 矩形の角を丸めるために用いられる楕円の Y 軸半径の長さ（規定値：0） | × |
rx、ry は、どちらかのみ指定されていたら、共に指定されている値になる。また、rx は width、ry は height のそれぞれ半分を超えない値にされる。
記述例
<svg viewbox="0 0 500 150" width="500" height="150"> <rect x="10" y="10" width="100" height="50" stroke="blue" fill="none" /> <rect x="10" y="70" width="100" height="50" fill="blue" /> <rect x="120" y="10" width="100" height="50" rx="20" ry="10" stroke="blue" fill="none" /> <rect x="120" y="70" width="100" height="50" rx="20" ry="10" fill="blue" /> <rect x="230" y="10" width="100" height="50" rx="20" ry="10" stroke="blue" fill="yellow" fill-opacity="0.2" stroke-width="5" /> <rect x="230" y="70" width="100" height="50" rx="20" ry="10" stroke="gray" fill="blue" fill-opacity="0.2" stroke-width="5" stroke-dasharray="10 2" /> <rect x="350" y="50" width="100" height="50" rx="20" ry="10" stroke="blue" fill="none" transform="rotate(-15, 350, 75)" /> </svg>
左側は枠のみ、塗りつぶしのみです。２列目は頂点を丸くしています。３列目はいろいろです。４列目は回転させています。
表示例
１３．３．２ 円 (circle)
円を作成するために使用します
circle 要素
円を作成する際に使用する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| cx | 数値 | 中心の X 座標（規定値：0） | × |
| cy | 数値 | 中心の Y 座標（規定値：0） | × |
| r | 数値 | 半径 | ○ |
記述例
<svg viewbox="0 0 300 150" width="300" height="150"> <circle cx="40" cy="40" r="30" stroke="blue" fill="none" /> <circle cx="40" cy="110" r="30" stroke="blue" /> <circle cx="120" cy="40" r="30" stroke="blue" fill="yellow" fill-opacity="0.2" stroke-width="5" /> <circle cx="120" cy="110" r="30" stroke="gray" fill="blue" fill-opacity="0.2" stroke-width="5" stroke-dasharray="10 2" /> <circle cx="160" cy="40" r="30" stroke="blue" fill="none" transform="skewX(60)" /> </svg>
左側は枠のみ、塗りつぶしのみです。２列目はいろいろです。３列目は右方向に傾けけています。
表示例
１３．３．３ 楕円 (ellipse)
楕円を作成するために使用します
ellipse 要素
楕円を作成する際に使用する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| cx | 数値 | 中心の X 座標（規定値：0） | × |
| cy | 数値 | 中心の Y 座標（規定値：0） | × |
| rx | 数値 | 水平方向の半径 | ○ |
| ry | 数値 | 垂直方向の半径 | ○ |
記述例
<svg viewbox="0 0 400 150" width="400" height="150"> <ellipse cx="50" cy="40" rx="50" ry="30" stroke="blue" fill="none" /> <ellipse cx="50" cy="110" rx="50" ry="30" stroke="blue" /> <ellipse cx="160" cy="40" rx="50" ry="30" stroke="blue" fill="yellow" fill-opacity="0.2" stroke-width="5" /> <ellipse cx="160" cy="110" rx="50" ry="30" stroke="blue" fill="yellow" fill-opacity="0.2" stroke-width="5" stroke-dasharray="10 2" /> <ellipse cx="50" cy="40" rx="50" ry="30" stroke="blue" fill="none" transform="rotate(45,285,75)" /> </svg>
左側は枠のみ、塗りつぶしのみです。２列目はいろいろです。３列目は回転させています。
表示例
１３．３．４ 直線 (line)
直線を作成するために使用します
line 要素
直線を作成する際に使用する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| x1 | 数値 | 開始点の X 座標（規定値：0） | × |
| y1 | 数値 | 開始点の Y 座標（規定値：0） | × |
| x2 | 数値 | 終了点の X 座標（規定値：0） | × |
| y2 | 数値 | 終了点の Y 座標（規定値：0） | × |
記述例
<svg viewbox="0 0 400 150" width="400" height="150"> <line x1="10" y1="90" x2="100" y2="10" stroke="blue" /> <line x1="110" y1="10" x2="200" y2="50" stroke="blue" stroke-opacity="0.4" stroke-width="5" /> <line x1="110" y1="50" x2="200" y2="90" stroke="gray" stroke-opacity="0.4" stroke-width="5" stroke-dasharray="10 2" /> </svg>
左側は単なる直線です。２列目はいろいろです。
表示例
１３．３．５ 折線 (polyline)
折線を作成するために使用します
polyline 要素
折線を作成する際に使用する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| points | 座標 | 空白区切りの、折れ線の各頂点の座標(x, y)列 | ○ |
| fill-rule | 塗りつぶし | × | |
| nonzero | 閉じた領域注１を全面塗りつぶす（規定値） | ||
| evenodd | 閉じた領域を規則注２に従って塗り分ける | ||
注１）polyline の場合も最後の頂点から最初の頂点に線が引かれていると考えます。
注２）領域内から外に向かって線を引いて、折線と交わるのが奇数本ならば塗りつぶす。
記述例
<svg viewbox="0 0 400 110" width="400" height="110"> <polyline points="30,10 10,30 110,30 60,50 60,10" stroke="blue" fill="none" /> <polyline points="30,60 10,80 110,80 60,100 60,60" fill="blue" /> <polyline points="150,10 130,30 230,30 180,50 180,10" stroke="blue" fill="yellow" fill-opacity="0.2" stroke-width="5" /> <polyline points="150,60 130,80 230,80 180,100 180,60" stroke="gray" fill="blue" fill-opacity="0.2" stroke-width="5" stroke-dasharray="10 2" /> </svg>
左側は枠のみ、塗りつぶしのみです。２列目はいろいろです。
表示例
fill-rule 属性を指定することによって、塗り分けことができます。
記述例
<svg viewbox="0 0 400 120" width="400" height="120"> <polyline points="10,30 110,30 110,130, 10,130 85,55 100,120 30,50" stroke="black" fill="lightgreen" fill-rule="nonzero" /> <polyline points="150,30 250,30 250,130, 150,130 225,55 240,120 170,50" stroke="black" fill="lightgreen" fill-rule="evenodd" /> </svg>
左側は全面を塗りつぶしていて、右側は塗り分けています。塗り分けは、折れ線で囲まれた領域内から外に向かって線を引いて、交わる折れ線が奇数本ならば塗りつぶし、そうでないなら塗りつぶさないという方式で行われています。
表示例
１３．３．６ 多角形 (polygon)
多角形を作成するために使用します。
polygon 要素
多角形を作成する際に使用する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| points | 座標 | 空白区切りの、折れ線の各頂点の座標(x, y)列 （最後の頂点から最初の頂点に線が引かれる） | ○ |
| fill-rule | 塗りつぶし | × | |
| nonzero | 閉じた領域を全面塗りつぶす（規定値） | ||
| evenodd | 閉じた領域を規則注１に従って塗り分ける | ||
注１）領域内から外に向かって線を引いて、折線と交わるのが奇数本ならば塗りつぶす。
記述例
<svg viewbox="0 0 400 110" width="400" height="110"> <polygon points="30,10 10,30 110,30 60,50 60,10" stroke="blue" fill="none" /> <polygon points="30,60 10,80 110,80 60,100 60,60" fill="blue" /> <polygon points="150,10 130,30 230,30 180,50 180,10" stroke="blue" fill="yellow" fill-opacity="0.2" stroke-width="5" /> <polygon points="150,60 130,80 230,80 180,100 180,60" stroke="gray" fill="blue" fill-opacity="0.2" stroke-width="5" stroke-dasharray="10 2" /> </svg>
左側は枠のみ、塗りつぶしのみです。２列目はいろいろです。
表示例
fill-rule 属性を指定することによって、塗り分けことができます。
記述例
<svg viewbox="0 0 400 120" width="400" height="120"> <polygon points="10,30 110,30 110,130, 10,130 85,55 100,120 30,50" stroke="black" fill="lightgreen" fill-rule="nonzero" /> <polygon points="150,30 250,30 250,130, 150,130 225,55 240,120 170,50" stroke="black" fill="lightgreen" fill-rule="evenodd" /> </svg>
左側は全面を塗りつぶしていて、右側は塗り分けています。塗り分けは、折れ線で囲まれた領域内から外に向かって線を引いて、交わる折れ線が奇数本ならば塗りつぶし、そうでないなら塗りつぶさないという方式で行われています。
表示例
１３．３．７ パス (path)
パスデータによって図形を作成します。
path 要素
パスデータによって図形を作成する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| d | パスデータ | 空白区切りのコマンド群 | ○ |
| pathlength | 数値 | パスの形式的な全長（stroke-dashoffsetやstroke-dasharray属性等はこの値を基準として描画される） | × |
| fill-rule | 塗りつぶし | × | |
| nonzero | 閉じた領域を全面塗りつぶす（規定値） | ||
| evenodd | 閉じた領域を規則注１に従って塗り分ける | ||
注１）領域内から外に向かって線を引いて、折線と交わるのが奇数本ならば塗りつぶす。
| コマンド | 引数 | 説明 |
|---|---|---|
| M、m | x,y | (x, y) を現在の座標とする |
| Z、z | （なし） | コマンド M で指定した座標まで直線を引いて図形を閉じる |
| L、l | x,y | 現在の座標から、(x, y) へ直線を引く |
| H、h | x | 現在の座標から、x まで水平線を引く |
| V、v | y | 現在の座標から、y まで垂直線を引く |
| A、a | rx,ry r l s x,y | 現在の点から点 (x, y) へ半径 (rx, ry) の楕円形の弧を引く |
| Q、q | x1,y1 x,y | (x1, y1) を用いて点 (x, y) へ二次ベジェ曲線を引く |
| T、t | x,y | 現在の点から (x, y) へ二次ベジェ曲線を引く |
| C、c | x1,y1 x2,y2 x,y | 現在の座標から、(x1, y1) と (x2, y2) を用いて (x, y) へ三次ベジェ曲線を引く |
| S、s | x2,y2 x,y | 前の (x2, y2) の点対称の地点と (x2, y2) を用いて (x, y) へ三次ベジェ曲線を引く |
○座標は、コマンドが大文字のときは絶対位置（左上点からの位置）、小文字のときは相対位置（前の座標からの位置）
○引数の区切りは、空白でもカンマ(,)でもよい。また、コマンド間の区切りは空白だがなくてもよい。
（１） 初期位置 (M、m)
Mx,y
(x, y) が、開始点となる座標（現在の座標）として新しく設定されます。パスデータの途中に出現した場合はそこで部分パスが区切られ、別の図形となります。
M は、絶対位置（左上点からの位置）、m は、相対位置（前の座標からの位置）です。
次の例では、開始点が移動するだけなので何も表示されません。
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <path d="M10,10"/> </svg>
（２） 終了 (Z、z)
Z
現在の部分パスの終了を意味し、現在の点から現在の部分パスの始点（M、m で指定した座標）への直線が自動的に描かれます。
次の例では、開始点のみなので何も表示されません。
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <path d="M10,10 Z"/> </svg>
（３） 直線 (L、l)
Lx,y
現在の座標から (x, y) まで直線が描かれます。
L は、絶対位置（左上点からの位置）、l は、相対位置（前の座標からの位置）です。
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <path d="M10,10 L110,10 l0,50 Z" stroke="blue" fill="lightgreen"/> </svg>
(10, 10)-(110, 10)-(110, 60)-(10, 10) のように直線を引きます。
表示例
.svg "path")
（４） 水平線 (H、h)
Hx
現在の座標から水平に x 座標まで直線が描かれます。
H は、絶対位置（左上点からの位置）、h は、相対位置（前の座標からの位置）です。
記述例
<svg viewbox="0 0 400 50" width="400" height="50"> <path d="M10,10 H110 M10,40 h100" stroke="blue"/> </svg>
(10, 10)-(110, 10) と (10, 40)-(110, 40) のように直線を引きます。
表示例
.svg "path")
（５） 垂直線 (V、v)
Vy
現在の座標から垂直に y 座標まで直線が描かれます。
V は、絶対位置（左上点からの位置）、v は、相対位置（前の座標からの位置）です。
記述例
<svg viewbox="0 0 400 120" width="400" height="120"> <path d="M10,10 V110 M40,10 v100" stroke="blue"/> </svg>
(10, 10)-(10, 110) と (40, 10)-(40, 110) のように直線を引きます。
表示例
.svg "path")
（６） 円弧 (A、a)
A rx,ry r l s x,y
現在の座標から、半径 (rx, ry) の楕円が (x, y) まで描かれます。ただし、
| r (x-axis-rotation) | : 軸を傾ける角度（度） |
| l (large-arc-flag) | : 弧の選択（0:短いほうの弧、1:長いほうの弧） |
| s (sweep-flag) | : 向きの選択（0:反時計回り、1:時計回り） |
A は、絶対位置（左上点からの位置）、a は、相対位置（前の座標からの位置）です。
円弧の傾けたい場合は、x-axis-rotation に傾ける角度（度）を指定します。
記述例
<svg viewbox="0 0 400 200" width="400" height="200"> <path d="M10,215 L60,165 A30,50 0 0 1 112,112 L122,102 A30,50 -45 0 1 165,60 L215,10" stroke="blue" fill="none"/> </svg>
一つ目（左側）の円弧は x-axis-rotation が 0 なので円弧が通る楕円が直立しています。それに対して二つ目（右側）の円弧は x-axis-rotation が -45 度になっていますので、左に 45度回転されて描かれています。
なお、グレイの点線は理解の助けになるように別途描いています。
表示例
a.svg "path")
円弧は直線と違い、開始点と終了点を指定しただけでは図形が一意に決まりません。large-arc-flag と sweep-flag を指定することによりどう描くかを指定します。
記述例
<svg viewbox="0 0 400 200" width="400" height="200"> <path d="M30,30 A30,30 0 0 0 60,60" stroke="blue" stroke-width="3" fill="none"/> <path d="M230,30 A30,30 0 0 1 260,60" stroke="blue" stroke-width="3" fill="none"/> <path d="M30,130 A30,30 0 1 0 60,160" stroke="blue" stroke-width="3" fill="none"/> <path d="M230,130 A30,30 0 1 1 260,160" stroke="blue" stroke-width="3" fill="none"/> </svg>
(30, 30)-(60, 60) のように左上から右下に向かって描いています。large-arc-flag と sweep-flag の指定により次のように描画されます。
なお、グレイの点線などは理解の助けになるように別途描いています。
表示例
b.svg "path")
（７） 二次ベジェ曲線 (Q、q、T、t)
制御点を 1 つだけ必要とし、始点（現在の座標）側と終点 (x, y) 側両方の曲線の傾斜を定義します。
Q や q の場合は (x1, y1) でその制御点を与えますが、T や t の場合は開始点を中心に前の制御点の点対称の位置を新しい制御点とします（略式 二次ベジェ曲線とも呼ばれています）。
Q x1,y1 x,y T x,y
記述例
<svg viewbox="0 0 400 180" width="400" height="180"> <path d="M50,10 Q100,160 150,110 T250,110" stroke="blue" fill="none" stroke-width="3"/> </svg>
●(50,10) から ●(100,160) を制御点にして ●(150,110) まで曲線を引いています。そのあと、●(150,110) を中心に ●(100,160) の点対象の位置 ●(200,60) を次の制御点にして引き続き ●(150,110) から ●(250,110) まで曲線を引いています。
なお、グレイの破線や色の薄い図形などは理解の助けになるように別途描いています。
表示例
a.svg "path")
２次ベジェ曲線で描くとしても、適切な制御点を見つけるのは簡単ではありません。そこで簡易的な２つの方法で描いてみます。
- ポイントを一つ置きに曲線の通る点と制御点にする
- ポイントの中点を曲線の通る点とし、ポイントを制御点にする
|
b1.svg "path")
|
b2.svg "path")
| |||||||||||||||||||||||||||||||||||||||
c1.svg "path")
|
c2.svg "path")
| ||||||||||||||||||||||||||||||||||||||||
| なお、グレイの線はポイントを直線で結んだ場合の図形です。 | |||||||||||||||||||||||||||||||||||||||||
（８） 三次ベジェ曲線 (C、c、S、s)
制御点を 2 つにして、始点（現在の座標）側と終点 (x, y) 側両方の曲線の傾斜を定義します。
C や c の場合は (x1, y1) と (x2, y2) でその制御点を与えますが、S や s の場合は2つ目の制御点は指定しますが、1つ目の制御点は開始点を中心に前の制御点の点対称の位置とします（略式 三次ベジェ曲線とも呼ばれています）。
C x1,y1 x2,y2 x,y S x2,y2 x,y
記述例
<svg viewbox="0 0 420 180" width="420" height="180"> <path d="M50,10 C170,60 60,160 200,160 S350,110 250,60" stroke="blue" fill="none" stroke-width="3"/> </svg>
●(50,10) から ●(170,60) と ●(60,160) を制御点にして ●(200,160) まで曲線を引いています。そのあと、●(200,160) を中心に ●(60,160) の点対象の位置 ●(340,160) を次の1つ目の制御点にして、指定されている2つ目の制御点 ●(350,110) とで引き続き ●(200,160) から ●(250,60) まで曲線を引いています。
なお、グレイの破線や色の薄い図形などは理解の助けになるように別途描いています。
表示例
a.svg "path")
fill-rule 属性を指定することによって、全面塗りつぶすか、塗り分けをするかを指定することができます。
evenodd（塗り分け）は、d で指定された線で囲まれた領域内から外に向かって線を引いて、交わる線が奇数本ならば塗りつぶし、そうでないなら塗りつぶさないという方式で行われています。
nonzero（全面塗りつぶし）の場合は基本的にすべてを塗りつぶしますが、左下の例のように nonzero であっても塗りわけが行われることがあります。
交わる線の向きが左から右のものと右から左のものとが同数のときは塗りつぶされません。
矢印は d で指定された線の描かれる向きです。別途描いています。
記述例
<svg viewbox="0 0 600 240" width="600" height="240"> <path d="M110,30 L190,30 L190,170 L110,170 Z M130,70 A20,20 0 0 1 170,70 A20,20 0 0 1 130,70 M130,130 A20,20 0 0 0 170,130 A20,20 0 0 0 130,130" stroke="black" fill="lightgreen" fill-rule="nonzero"/> <path d="M210,30 L290,30 L290,170 L210,170 Z M230,70 A20,20 0 0 1 270,70 A20,20 0 0 1 230,70 M230,130 A20,20 0 0 0 270,130 A20,20 0 0 0 230,130" stroke="black" fill="lightgreen" fill-rule="evenodd"/> </svg>
表示例
b.svg "path")
真ん中に穴を開けて背景が表示されるようにすることもできます。
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <image x="300" y="10" width="64" height="64" href="bear.png"/> <path d="M100,10 L174,10 L174,74 L100,74 Z M160,70 A25,35 0 1 0 120,70 Z" fill="blue" fill-rule="evenodd"/> </svg>
表示例
１３．４ テキスト
１３．４．１ テキスト (text)
テキストを図形として作成します。テキストは <text>～</text> の間に記述します。
text 要素
テキストを図形として図形を作成する。
属性の詳細については以降の説明を参照してください。
属性
（１） 文字位置
テキストを表示する位置や角度などを指定します。
なお、テキストの描画は文字の下部を基準に行われるため、Y 座標の指定を適切に行わないと文字が描画されないことがあります。また、改行文字やタブ文字等は空白文字として扱われるため、改行を表現するには描画位置を指定し直す必要があります。
text 要素 （文字位置に関する属性）
テキストを図形として図形を作成する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| x | 数値 | 文字が描画される位置の X 座標 | ○ |
| y | 数値 | 文字が描画される位置の Y 座標 | ○ |
| dx | 数値 | 本来文字が描画されるべき位置からの X 軸方向の差分値（規定値：0） | × |
| dy | 数値 | 本来文字が描画されるべき位置からの Y 軸方向の差分値（規定値：0） | × |
| roate | 角度（度） | テキストの回転角度（グリフ定義の原点を中心として回転）（規定値：0） | × |
○すべてカンマ(,)で区切って複数記述すれば、テキストの一文字ずつを指定できる。
記述例
<svg viewbox="0 0 400 125" width="400" height="125"> <text x="10" y="20" fill="blue" font-size="24">壱弐参肆</text> <text x="10,30,60,100" y="40" fill="blue" font-size="24">壱弐参肆</text> <text x="10" y="60" dx="15,0,10,20" fill="blue" font-size="24">壱弐参肆</text> </svg>
表示位置を指定しています。
x などで複数の位置を指定して、２文字目以降の文字位置も指定することができます。２つ目の例の１文字目は 10px、２文字目は 30px、３文字は 60px、４文字は 100pxとなります。
dx などで複数の差分値を記述した場合、後ろの文字は前の文字のずれにさらに差分値分のずれが加わります。３つ目の例の１文字目は 15px のずれ、２文字目は (15+0)px のずれ、３文字目は (15+0+5)px のずれ、４文字目は (15+0+5+25)px のずれになります。
なお、標準の位置を表すグレイの文字などは理解の助けになるように別途描いています。
表示例
a.svg "text")
記述例
<svg viewbox="0 0 400 120" width="400" height="120"> <text x="10" y="50" fill="blue" font-size="48" rotate="30">テキスト</text> <text x="260" y="50" fill="blue" font-size="48" rotate="0,30,60,90">テキスト</text> </svg>
左側は文字を回転しています。回転の中心はグリフ定義の原点（たいていは文字の左下）です。右側は順に回転角を指定しています。
なお、グレイの文字などは理解の助けになるように別途描いています。
表示例
b.svg "text")
記述例
<svg viewbox="-50 0 370 180" width="420" height="180"> <text x="-30" y="50" fill="blue" font-size="24" transform="scale(-1,1)">壱弐参肆</text> <text x="10" y="100" fill="blue" font-size="24" transform="skewX(30)">壱弐参肆</text> <text x="10" y="150" fill="blue" font-size="24" transform="rotate(-15,58,150)">壱弐参肆</text> </svg>
左側は文字を回転しています。回転の中心はグリフ定義の原点（たいていは文字の左下）です。右側は順に回転角を増しています。
なお、グレイの文字などは理解の助けになるように別途描いています。
表示例
（２） フォントスタイル
フォントスタイルに関わる属性を設定すれば見栄えを変えることができます。
text 要素 （フォントスタイルに関する属性）
フォントスタイルを変更する。
属性
| 属性名 | 属性値 | 説明 | 必須 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| font-family | 文字列 | フォント名 | × | |||||||||
フォントファミリ名
| ||||||||||||
| font-size | 数値 | フォントサイズ（規定値：12） | × | |||||||||
| font-weight | フォントの太さ | × | ||||||||||
| normal | 標準（規定値） | |||||||||||
| bold | 太く | |||||||||||
| bolder | より太く（現状は bold と同じ） | |||||||||||
| lighter | より細く（現状は normal と同じ） | |||||||||||
| font-style | フォントの形状 | × | ||||||||||
| normal | 通常（規定値） | |||||||||||
| italic | イタリック体（専用フォントがあればそのフォントで表示する。 なければ oblique と同じ） | |||||||||||
| oblique | 斜体（標準フォントを傾けて表示する） | |||||||||||
| font-variant | 小文字の形態 | × | ||||||||||
| normal | 通常（規定値） | |||||||||||
| small-caps | スモールキャプス体（小文字ではなく大文字を小さく表示する） | |||||||||||
| text-decoration | テキスト装飾 | × | ||||||||||
| none | なし（規定値） | |||||||||||
| underline | 上線 | |||||||||||
| overline | 下線 | |||||||||||
| line-through | 取り消し線 | |||||||||||
フォントファミリの例です
記述例
<svg viewbox="0 0 700 140" width="700" height="140"> <g fill="blue" font-size="16"> <text x="10" y="20">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text> <text x="10" y="40" font-family="serif">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text> <text x="10" y="60" font-family="sans-serif">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text> <text x="10" y="80" font-family="cursive">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text> <text x="10" y="100" font-family="fantasy">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text> <text x="10" y="120" font-family="monospace">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text> </g> </svg>
いろいろなフォントファミリで表示しています。
表示例
a.svg "text")
フォントスタイルの例です
記述例
<svg viewbox="0 0 500 130" width="500" height="130"> <text x="10" y="40" fill="blue" font-size="20" font-weight="normal">Text文書</text> <text x="10" y="60" fill="blue" font-size="20" font-weight="bold">Text文書</text> <text x="10" y="80" fill="blue" font-size="20" font-weight="bolder">Text文書</text> <text x="10" y="100" fill="blue" font-size="20" font-weight="lighter">Text文書</text> <text x="110" y="40" fill="blue" font-size="20" font-style="normal">Text文書</text> <text x="110" y="60" fill="blue" font-size="20" font-style="italic">Text文書</text> <text x="110" y="80" fill="blue" font-size="20" font-style="oblique">Text文書</text> <text x="60" y="120" fill="blue" font-size="20" font-weight="bold" font-style="italic">Text文書</text> <text x="210" y="40" fill="blue" font-size="20" font-variant="normal">Text文書</text> <text x="210" y="60" fill="blue" font-size="20" font-variant="small-caps">Text文書</text> <text x="310" y="40" fill="blue" font-size="20" text-decoration="normal">Text文書</text> <text x="310" y="60" fill="blue" font-size="20" text-decoration="underline">Text文書</text> <text x="310" y="90" fill="blue" font-size="20" text-decoration="overline">Text文書</text> <text x="310" y="110" fill="blue" font-size="20" text-decoration="line-through">Text文書</text> </svg>
いろいろなフォントスタイルで表示しています。
表示例
b.svg "text")
（３） 文字の間隔
文字の間隔を変えることができます。
text 要素 （文字の間隔に関する属性）
文字の間隔を変えることができる。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| kerning | カーニングの指定 | × | |
| auto | 自動調整（規定値） | ||
| 数値 | カーニング幅 | ||
| inherit | 継承 | ||
| letter-spacing | 文字間隔 | × | |
| normal | 文字間隔:0 | ||
| 数値 | 文字間隔（規定値:1） | ||
| inherit | 継承 | ||
| word-spacing | 単語間隔 | × | |
| normal | 単語間隔:0（規定値） | ||
| 数値 | 単語間隔 | ||
| inherit | 継承 | ||
記述例
<svg viewbox="0 0 600 160" width="600" height="160"> <g font-family="Times Roman" font-size="16"> <text x="10" y="20" fill="blue" kerning="auto">Give Peace a Chance</text> <text x="10" y="35" fill="blue" kerning="200">Give Peace a Chance</text> <text x="10" y="60" fill="blue" letter-spacing="-1">Give Peace a Chance</text> <text x="10" y="75" fill="blue" letter-spacing="normal">Give Peace a Chance</text> <text x="10" y="90" fill="blue" letter-spacing="1">Give Peace a Chance</text> <text x="10" y="113" fill="blue" word-spacing="-1">Give Peace a Chance</text> <text x="10" y="130" fill="blue" word-spacing="normal">Give Peace a Chance</text> <text x="10" y="145" fill="blue" word-spacing="1">Give Peace a Chance</text> </g> </svg>
いろいろな文字間隔で表示しています。
表示例
.svg "text")
（４） テキスト全体の幅
テキスト全体の幅を変えることができます。
text 要素 （テキスト全体の幅に関する属性）
テキスト全体の幅を変えることができる。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| textLength | 数値 | テキスト全体の幅 | × |
| lengthAdjust | 幅の調整方法 | × | |
| spacing | 幅の調整を空白で行う（規定値） | ||
| spacingAndGlyphs | 幅の調整を文字幅で行う | ||
記述例
<svg viewbox="0 0 500 130" width="500" height="130"> <text x="10" y="20" fill="blue" textLength="150">期待はあらゆる苦悩のもと</text> <text x="10" y="40" fill="blue">期待はあらゆる苦悩のもと</text> <text x="10" y="60" fill="blue" textLength="200">期待はあらゆる苦悩のもと</text> <text x="10" y="90" fill="blue" textLength="300" lengthAdjust="spacing">期待はあらゆる苦悩のもと</text> <text x="10" y="110" fill="blue" textLength="300" lengthAdjust="spacingAndGlyphs">期待はあらゆる苦悩のもと</text> </svg>
テキスト全体をいろいろな幅で表示しています。
表示例
.svg "text")
（５） テキストの配置
設定された座標に表示する、テキストの位置を指定します。
text 要素 （テキストの配置に関する属性）
設定された座標に表示する、テキストの位置を指定することができる。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| text-anchor | テキストの基準位置 | × | |
| start | 開始（規定値） | ||
| middle | 真ん中 | ||
| end | 終了 | ||
記述例
<svg viewbox="0 0 500 100" width="500" height="100"> <text x="200" y="20" fill="blue" text-anchor="start">芸術は長く、人生は短し</text> <text x="200" y="50" fill="blue" text-anchor="middle">芸術は長く、人生は短し</text> <text x="200" y="80" fill="blue" text-anchor="end">芸術は長く、人生は短し</text> </svg>
テキストをいろいろな基準位置で表示しています。
なお、グレイの破線などは理解の助けになるように別途描いています。
表示例
.svg "text")
（６） テキストの方向
テキストの方向を指定します。
text 要素 （テキストの方向に関する属性）
テキストの方向を指定することができる。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| writing-mode | テキストの横書き・縦書きを制御する | × | |
| horizontal-tb | 横書き（規定値） | ||
| vertical-rl | 縦書き（右から左方向） | ||
| vertical-lr | 縦書き（左から右方向） | ||
| direction | 文字列の方向 | × | |
| ltr | 左から右（規定値） | ||
| rtl | 右から左 | ||
| unicode-bidi | 双方向性（ブラウザによって動作が異なる） | × | |
| normal | そのまま（規定値） | ||
| embed | Unicodeによる文字表記の方向設定を組み込む | ||
| bidi-override | Unicodeによる文字表記の方向設定を無効にする | ||
| inherit | 継承 | ||
記述例
<svg viewbox="0 0 400 280" width="400" height="280"> <text x="10" y="20" fill="blue" writing-mode="horizontal-tb">令和元年は「2019年」です。</text> <text x="180" y="40" fill="blue" writing-mode="horizontal-tb" direction="rtl" unicode-bidi="bidi-override">令和元年は「2019年」です。</text> <text x="10" y="50" fill="blue" writing-mode="vertical-rl">令和元年は「2019年」です。</text> <text x="160" y="50" fill="blue" writing-mode="vertical-lr">令和元年は「2019年」です。</text> </svg>
表示例
.svg "text")
（７） テキスト幅のオーバーフロー
テキスト幅を超えた場合の表示方法の設定をします。
text 要素 （テキスト幅に関する属性）
テキスト幅を超えた場合の表示方法の設定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| text-overflow | 文字列の描画幅 | × | |
| clip | そのまま（規定値） | ||
| ellipsis | ... と省略される | ||
記述例
<svg viewbox="0 0 400 80" width="400" height="80"> <text x="10" y="20" fill="blue" width="150" text-overflow="clip">最も大きな危険は勝利の瞬間にある。</text> <text x="10" y="20" fill="blue" width="150" text-overflow="ellipsis">最も大きな危険は勝利の瞬間にある。</text> </svg>
なお、グレイの破線などは理解の助けになるように別途描いています。
表示例
.svg "text")
（８） 文字の基底線
文字を配置する際の基準となる線を基底線の設定をします。
text 要素 （文字の基底線に関する属性）
文字を配置する際の基準となる線を基底線の設定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| dominant-baseline | 文字の描画に用いる基底線 | × | |
| auto | そのまま（規定値） | ||
| use-script | |||
| no-change | 親の設定 | ||
| reset-size | フォントサイズ変更 | ||
| ideographic | ideographic基底線を利用する（ひらがな、漢字、ハングル等） | ||
| alphabetic | alphabetic基底線を利用する（アルファベット等） | ||
| hanging | hanging基底線を利用する（インド系言語） | ||
| mathematical | mathematical基底線を利用する（数学記号） | ||
| central | central基底線を利用する | ||
| middle | middle基底線を利用する | ||
| text-after-edge | text-after-edge基底線を利用する | ||
| text-before-edge | text-before-edge基底線を利用する | ||
記述例
<svg viewbox="0 0 500 180" width="500" height="180"> <text x="0" y="25" fill="blue" font-size="20" dominant-baseline="auto">あ:auto</text> <text x="0" y="50" fill="blue" font-size="20" dominant-baseline="use-script">あ:use-script</text> <text x="0" y="75" fill="blue" font-size="20" dominant-baseline="no-change">あ:no-change</text> <text x="0" y="100" fill="blue" font-size="20" dominant-baseline="reset-size">あ:reset-size</text> <text x="0" y="125" fill="blue" font-size="20" dominant-baseline="ideographic">あ:ideographic</text> <text x="0" y="150" fill="blue" font-size="20" dominant-baseline="alphabetic">あ:alphabetic</text> <text x="200" y="25" fill="blue" font-size="20" dominant-baseline="hanging">あ:hanging</text> <text x="200" y="50" fill="blue" font-size="20" dominant-baseline="mathematical">あ:mathematical</text> <text x="200" y="75" fill="blue" font-size="20" dominant-baseline="central">あ:central</text> <text x="200" y="100" fill="blue" font-size="20" dominant-baseline="middle">あ:middle</text> <text x="200" y="125" fill="blue" font-size="20" dominant-baseline="text-after-edge">あ:text-after-edge</text> <text x="200" y="150" fill="blue" font-size="20" dominant-baseline="text-before-edge">あ:text-before-edge</text> </svg>
なお、グレイの破線などは理解の助けになるように別途描いています。
表示例
.svg "text")
１３．４．２ 部分テキスト (tspan)
一連のテキストの一部分だけを調整したい場合、text 要素の内部に子要素として tspan 要素を指定します。
tspan 要素には、親要素である text 要素とは異なる書式や位置を含めることができます。
tspan 要素
テキストを図形として図形を作成する。
text 要素と同様の属性があります。text 要素の説明を参照してください。
それ以外に次のような属性もあります。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| baseline-shift | 基底線の調整（規定値：0） | × | |
| sub | 下付き文字 | ||
| super | 上付き文字 | ||
| パーセンテージ | フォントサイズに対する、ずらす割合 | ||
| ピクセル数 | ずらす幅 | ||
記述例
<svg viewbox="0 0 500 60" width="500" height="60"> <text x="10" y="20" fill="blue" font-size="14">テキストを部分的に <tspan text-decoration="line-through">削除したり</tspan>、 <tspan font-weight="bold" fill="red">強調したり</tspan>できます。</text> <text x="10" y="40" fill="blue" font-size="14">C<tspan baseline-shift="sub">27</tspan> H<tspan baseline-shift="sub">46</tspan>O</text> <text x="100" y="40" fill="blue" font-size="14">x<tspan baseline-shift="super">2</tspan></text> <text x="10" y="100" fill="blue" font-size="24">中<tspan baseline-shift="-50%">下</tspan> <tspan baseline-shift="100%">上</tspan></text> <text x="100" y="100" fill="blue" font-size="24">中<tspan baseline-shift="-12">下</tspan> <tspan baseline-shift="24">上</tspan></text> </svg>
パーセンテージは、フォントサイズに対する割合です。下の例のフォントサイズは 24px なので、-50% は 12px、100% は 24px となります。
グレーの文字は標準の位置を表しています。理解の助けになるように別途描いています。
表示例
１３．４．３ テキストパス (textPath)
textPath 要素を用いると予め定義しておいた曲線の上に文字列を配置することが出来ます。文字描画の基底線が曲線に接するように配置されます。
textPath 要素
予め定義しておいた曲線の上に文字列を配置する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| href | ID | path 要素の ID | × |
| startOffset | 数値 | 文字配置の開始位置（規定値：0） | × |
| method | 文字の変形方法 | × | |
| align | 位置のみ | ||
| stretch | パスに沿って変形する | ||
| spacing | 文字間のスペースの調整方法 | × | |
| exact | そのままの文字間の幅で並べる | ||
| auto | 文字間の調整をする | ||
<svg viewbox="0 0 500 140" width="500" height="140"> <defs> defs 要素内は定義のみで描画しない <path id="tp1" d="M100,60 a40,40 0 1 1 -40,-40"/> <path id="tp2" d="M200,20 a40,40 0 1 0 40,40"/> </defs> <text fill="blue" font-size="16"> <textPath href="#tp1">表面張力で丸くなる</textPath> <textPath href="#tp2">表面張力で丸くなる</textPath> </text> </svg>
テキストは、パスの進行方向左側に表示されます。
なお、グレイの線などは理解の助けになるように別途描いています。
表示例
１３．５ イメージ (image)
画像を表示します。
image 要素
画像を表示する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| x | 数値 | 左上の X 座標（規定値：0） | × |
| y | 数値 | 左上の Y 座標（規定値：0） | × |
| width | 数値 | 画像を表示する領域の幅 | ○ |
| height | 数値 | 画像を表示する領域の高さ | ○ |
| href | ID | 画像の URI | ○ |
<svg viewbox="0 0 200 100" width="200" height="100"> <image x="10" y="10" width="74" height="74" href="bear.png"/> <image x="100" y="10" width="74" height="74" href="bear.png" transform="rotate(60,137,47)"/> </svg>
右側のイメージは回転させています。
表示例
svg タグを記述したファイルを iframe、object、img タグで指定して画像ファイルのように表示することができます。
ただし、img タグのときはファイル内に記述された image が表示されないようです。
記述例
<svg viewbox="0 0 74 74" width="74" height="74" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" width="74" height="74" stroke="gray" fill="lightyellow"/> <image x="10" y="10" width="74" height="74" href="bear.png"/> </svg> <iframe src="bear.svg" width="74" height="74" style="margin:0;"></iframe> <object data="bear.svg" width="74" height="74"></object> <img src="bear.svg" width="74" height="74">
bear.svg
<svg viewbox="0 0 74 74" width="74" height="74" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" width="74" height="74" stroke="gray" fill="lightyellow"/> <image x="10" y="10" width="74" height="74" href="bear.png"/> </svg>
表示例
| 直接記述 | iframe | object | img |
 |
１３．６ グラデーション
グラデーションは塗り潰しに用いる色を徐々に変化させることで、単色によるものに比べて滑らかな見た目をもたらします。
SVG においても帯状にグラデーションを掛ける linearGradient 要素と放射状に掛ける radialGradient 要素が提供されています。
また、実際にグラデーションを始めるたり終わらせたりする位置や色は、<linearGradient>～</linearGradient> などの間に記述した stop 要素や href 属性で指定します。
１３．６．１ 色傾斜 (stop)
stop 要素は、linearGradient 要素やradialGradient 要素などで定義された勾配ベクトルに基準となる色の位置を指定します。また、色の他に不透明度を設定することも可能で、stop 要素間の色は線形に補間されます。なお、stop 要素で設定された範囲外は通常単色で塗りつぶされます。
stop 要素
色の位置を指定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| offset | 0～1、0%～100% | グラデーションを始めるあるいは終わらせる位置（規定値：0） | × |
| stop-color | 色 | グラデーションの基準色（規定値：black） | × |
| stop-opacity | グラデーションの基準色の不透明度（規定値：1） | × | |
| パーセンテージ | 不透明度 | ||
| inherit | 不継承 | ||
stop 要素は offset 値の小さい順に並べます。
offset 値は、radialGradient 要素のときは焦点 (fx,fy) から最大／最外円までの距離に対する比率です。
<svg viewbox="0 0 400 220" width="400" height="220"> <defs> <linearGradient id="g1"> <stop offset="20%" stop-color="blue"/> <stop offset="50%" stop-color="green"/> <stop offset="80%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="300" height="100" fill="url(#g1)"/> <defs> <radialGradient id="g2"> <stop offset="20%" stop-color="blue"/> <stop offset="50%" stop-color="green"/> <stop offset="80%" stop-color="yellow"/> </radialGradient> </defs> <rect x="0" y="110" width="300" height="100" fill="url(#g2)"/> </svg>
20% ～ 80% が勾配ベクトルとなります。
0% ～ 20% は 青単色、80% ～ 100% は 黄単色です。その間は、20% ～ 50% は、青と緑の、50% ～ 80% は、緑と黄のグラデーションになります。
なお、"勾配ベクトル"とその下のグレイの線などは理解の助けになるように別途描いています。
表示例
また、offset が同じ stop 要素があった場合は、そこでグラデーションは終了し左右が別のグラデーションになります。
<svg viewbox="0 0 400 220" width="400" height="220"> <defs> <linearGradient id="g1"> <stop offset="20%" stop-color="yellow"/> <stop offset="50%" stop-color="blue"/> <stop offset="50%" stop-color="green"/> <stop offset="80%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="300" height="100" fill="url(#g1)"/> <defs> <radialGradient id="g2"> <stop offset="20%" stop-color="yellow"/> <stop offset="50%" stop-color="blue"/> <stop offset="50%" stop-color="green"/> <stop offset="80%" stop-color="yellow"/> </radialGradient> </defs> <rect x="0" y="110" width="300" height="100" fill="url(#g2)"/> </svg>
offset が 50% の stop 要素が２つあるので、そこで左右が別のグラデーションになります。
なお、"勾配ベクトル"とその下のグレイの線などは理解の助けになるように別途描いています。
表示例
１３．６．２ 線形グラデーション (linearGradient)
linearGradient 要素は帯状に色が広がるグラデーションを定義します。
グラデーションの色の指定には stop 要素を用います。グラデーションの勾配ベクトルは x1，y1 でその始点を x2，y2 でその終点を表現します。始点から終点に向かって色を変化させます。
linearGradient 要素
帯状に色が広がるグラデーションを定義する。
始点 (x1,y1) と終点 (x2,y2) で指定した勾配ベクトルの間でグラデーションが描かれる。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| gradientUnits | グラデーションをかける座標系 | × | |
| userSpaceOnUse | 図形が描画される座標系（SVG 全体の座標） | ||
| objectBoundingBox | 図形が内包する座標系（図形内の座標）（規定値） | ||
| gradientTransform | 変形関数（transform と同じ） ただし、translate(tx,ty)のtxやtyは 0～1 の範囲 | × | |
| spreadMethod | 敷き詰め方法 | × | |
| pad | 1回のみ（規定値） | ||
| repeat | 繰り返し | ||
| reflect | グラデーション方向を逆にして繰り返し | ||
| href | ID | 別の linearGradient の ID | ×（注） |
（注）記述しない場合は、<linearGradient>～</linearGradient> の間にstop 要素が必要
（１） gradientUnits 属性
グラデーションをかける座標系の設定をします。
userSpaceOnUse は、図形が描画されている SVG の座標系で、transform 属性が指定されていなければ通常 SVG 要素などの viewBox から定まるものです。
objectBoundingBox は、図形を囲む矩形を考え、その左上を原点（0,0）とし、左下を（1,1）としたものです。
|
|
|
<svg viewbox="0 0 200 100" width="200" height="100"> <defs> <linearGradient id="g" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </linearGradient> </defs> <rect x="0" y="0" width="200" height="50" stroke="none" fill="url(#g)"/> <ellipse cx="100" cy="50" rx="60" ry="30" stroke="none" fill="url(#g)"/> </svg> この例のグラデーションは userSpaceOnUse なので、楕円は viewbox 全幅のグラデーションの一部を切り取ったグラデーションになります。 なお、グレイの線は viewbox を表しています。理解の助けになるように別途描いています。
表示例 userSpaceOnUse
b1.svg "linearGradient")
|
<svg viewbox="0 0 200 100" width="200" height="100"> <defs> <linearGradient id="g" gradientUnits="objectBoundingBox"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </linearGradient> </defs> <rect x="0" y="0" width="200" height="50" stroke="none" fill="url(#g)"/> <ellipse cx="100" cy="50" rx="60" ry="30" stroke="none" fill="url(#g)"/> </svg> この例のグラデーションは objectBoundingBox なので、楕円は 自身の幅でのグラデーションになります。 なお、グレイの線は viewbox を表しています。理解の助けになるように別途描いています。
表示例 objectBoundingBox
b2.svg "linearGradient")
|
（２） gradientTransform 属性
radientTransform属性によって、グラデーションを変換することができます。グラデーションを施す際の基準となる（gradientUnitsから定まる）座標軸が予めこの属性によって変換されてから塗り潰しが行われます。
transform 属性と同様に、matrix、translate、rotate、scale、skewX、skewY 関数を空白またはカンマ区切りで列挙します。
注意：translate(tx, ty) の tx や ty は 0～1 の範囲で指定します。
<svg viewbox="-10 0 400 160" width="400" height="160"> <defs> <linearGradient id="g1"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </linearGradient> </defs> <rect x="0" y="0" width="100" height="100" fill="url(#g1)"/> <defs> <linearGradient id="g2" gradientTransform="rotate(45)"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </linearGradient> </defs> <rect x="120" y="0" width="100" height="100" fill="url(#g2)"/> <defs> <linearGradient id="g3" gradientTransform="translate(0.2,0) scale(0.5,1) skewX(30)"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </linearGradient> </defs> <rect x="240" y="0" width="100" height="100" fill="url(#g3)"/> </svg>
なお、「勾配ベクトル」とその下のグレイの線は理解の助けになるように別途描いています。
表示例
.svg "gradientTransform")
（３） spreadMethod 属性
グラデーションは spreadMethod 属性によってその敷き詰め方法を設定することができます。
pad では、グラデーションは１回だけです。グラデーション以外の部分は両端の単色で塗られます。
repeat では、グラデーションは繰り返し行われます。グラデーションの勾配は一定です。
reflect では、グラデーションは、グラデーションの勾配が逆になり繰り返し行われます。
次の図は青い線の通っている場所の色のようにグラデーションが変化していくことを示しています。
<svg viewbox="0 0 300 160" width="300" height="160"> <defs> <linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="120" y1="0" x2="220" y2="0" spreadMethod="pad"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </linearGradient> <linearGradient id="g2" gradientUnits="userSpaceOnUse" x1="120" y1="0" x2="220" y2="0" spreadMethod="repeat"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </linearGradient> <linearGradient id="g3" gradientUnits="userSpaceOnUse" x1="120" y1="0" x2="220" y2="0" spreadMethod="reflect"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </linearGradient> </defs> <rect x="20" y="20" width="300" height="30" fill="url(#g1)"/> <rect x="20" y="70" width="300" height="30" fill="url(#g2)"/> <rect x="20" y="120" width="300" height="30" fill="url(#g3)"/> </svg>
spreadMethod 属性によってグラデーションの敷き詰め方法が変わります。なお、点線は理解の助けになるように別途描いています。
表示例
b.svg "gradientTransform")
（４） x1、y1、x2、y2 属性
始点 (x1,y1) から 終点(x2,y2) に向かう勾配ベクトルになります。
y1 と y2 が等しい場合は、水平方向のベクトルになり、x1 と x2 が等しい場合は、垂直方向のベクトルになります。
gradientUnits="userSpaceOnUse" の場合は、X 座標、Y 座標で、gradientUnits="objectBoundingBox" の場合は、0～1 あるいは 0%～100% を指定します。
<svg viewbox="0 0 500 140" width="500" height="140"> <defs> <linearGradient id="g1"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="azure"/> </linearGradient> <linearGradient id="g2" x2="0" y2="1"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="azure"> </linearGradient> <linearGradient id="g3" x1="20%" y1="20%" x2="80%" y2="80%"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="azure"/> </linearGradient> </defs> <rect x="20" y="20" width="100" height="100" fill="url(#g1)"/> <rect x="140" y="20" width="100" height="100" fill="url(#g2)"/> <rect x="260" y="20" width="100" height="100" fill="url(#g3)"/> </svg>
左は、省略してあるので、x1="0"、y1="0"、x2="1"、y2="0" となり水平方向のグラデーションになります。
二番目は、x1="0"、y1="0"、x2="0"、y2="1" となり垂直方向のグラデーションになります。
表示例
a.svg "gradientTransform")
また、グラデーションの始点と終点は、x1、y1、x2、y2 属性だけでなく、stop 要素の offset でも決まります。
<svg viewbox="0 0 500 140" width="500" height="140"> <defs> <linearGradient id="g1" x1="20%" y1="0%" x2="80%" y2="0%"> <stop offset="10%" stop-color="green"/> <stop offset="90%" stop-color="azure"/> </linearGradient> <linearGradient id="g2" x1="10%" y1="0%" x2="90%" y2="0%"> <stop offset="20%" stop-color="green"/> <stop offset="80%" stop-color="azure"/> </linearGradient> </defs> <rect x="20" y="20" width="300" height="50" fill="url(#g1)"/> <rect x="20" y="100" width="300" height="50" fill="url(#g2)"/> </svg>
上は、linearGradient 要素で指定された 20% ～ 80%（グレイの実線）が勾配ベクトルになりますが、stop 要素で 10% ～ 90% となっているのでので、実際のグラデーションは 26%（=20%+(80%-20%)*10%）～ 74%（=20%+(80%-20%)*90%）になります。
下は、linearGradient 要素で指定された 10% ～ 90%（グレイの実線）が勾配ベクトルになりますが、stop 要素で 20% ～ 80% となっているのでので、実際のグラデーションは 26%（=10%+(90%-10%)*20%）～ 74%（=10%+(90%-10%)*80%）になります。
表示例
b.svg "gradientTransform")
１３．６．３ 放射型グラデーション (radialGradient)
linearGradient 要素は放射状（円形）に色が広がるグラデーションを定義します。
グラデーションの色の指定には stop 要素を用います。グラデーションの勾配ベクトルは焦点 (fx,fy) を中心とした半径 r の円になり、焦点から円周に向かって色を変化させます。グラデーションは (cx,cy) を中心とした半径 r の円で描かれます。
radialGradient 要素
帯状に色が広がるグラデーションを定義する。
中心点 (cx，y) と半径 (r) で指定した勾配ベクトルの間でグラデーションが描かれる。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| gradientUnits | グラデーションをかける座標系 | × | |
| userSpaceOnUse | 図形が描画される座標系（SVG 全体の座標） | ||
| objectBoundingBox | 図形が内包する座標系（図形内の座標）（規定値） | ||
| gradientTransform | 変形関数（transform と同じ） ただし、translate(tx,ty)のtxやtyは 0～1 の範囲 | × | |
| spreadMethod | 敷き詰め方法 | × | |
| pad | 1回のみ（規定値） | ||
| repeat | 繰り返し | ||
| reflect | グラデーション方向を逆にして繰り返し | ||
| href | ID | 別の linearGradient の ID | ×（注） |
（注）記述しない場合は、<linearGradient>～</linearGradient> の間にstop 要素が必要
（１） gradientUnits 属性
グラデーションをかける座標系の設定をします。
userSpaceOnUse は、図形が描画されている SVG の座標系で、transform 属性が指定されていなければ通常 SVG 要素などの viewBox から定まるものです。
objectBoundingBox は、図形を囲む矩形を考え、その左上を原点（0,0）とし、左下を（1,1）としたものです。
|
|
|
<svg viewbox="0 0 200 100" width="200" height="100"> <defs> <radialGradient id="g" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> <defs> <rect x="0" y="0" width="200" height="50" stroke="none" fill="url(#g)"/> <ellipse cx="100" cy="50" rx="60" ry="30" stroke="none" fill="url(#g)"/> </svg> この例のグラデーションは userSpaceOnUse なので、楕円は viewbox 全幅のグラデーションの一部を切り取ったグラデーションになります。 なお、グレイの線は viewbox を表しています。理解の助けになるように別途描いています。
表示例 userSpaceOnUse
b1.svg "radialGradient")
|
<svg viewbox="0 0 200 100" width="200" height="100"> <defs> <radialGradient id="g" gradientUnits="objectBoundingBox"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> </defs> <rect x="0" y="0" width="200" height="50" stroke="none" fill="url(#g)"/> <ellipse cx="100" cy="50" rx="60" ry="30" stroke="none" fill="url(#g)"/> </svg> この例のグラデーションは objectBoundingBox なので、楕円は 自身の幅でのグラデーションになります。 なお、グレイの線は viewbox を表しています。理解の助けになるように別途描いています。
表示例 objectBoundingBox
b2.svg "radialGradient")
|
（２） gradientTransform 属性
radientTransform属性によって、グラデーションを変換することができます。グラデーションを施す際の基準となる（gradientUnitsから定まる）座標軸が予めこの属性によって変換されてから塗り潰しが行われます。
transform 属性と同様に、matrix、translate、rotate、scale、skewX、skewY 関数を空白またはカンマ区切りで列挙します。
注意：translate(tx, ty) の tx や ty は 0～1 の範囲で指定します。
<svg viewbox="0 0 400 160" width="410" height="160"> <defs> <radialGradient id="g1"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> <defs> <rect x="0" y="0" width="100" height="100" fill="url(#g1)"/> <path d="M50,50 h50" stroke="black" stroke-width="3"> <text x="50" y="45" text-anchor="start" font-size="9">勾配ベクトル</text> <defs> <radialGradient id="g2" gradientTransform="rotate(-45,0.5,0.5) scale(1,0.5) translate(0,0.5)"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> <defs> <rect x="120" y="0" width="100" height="100" fill="url(#g2)"/> <defs> <radialGradient id="g3" gradientTransform="skewX(20) translate(-0.2,0)"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> <defs> <rect x="240" y="0" width="100" height="100" fill="url(#g3)"/> </svg>
なお、グレイの × はグラデーションの中心です。理解の助けになるように別途描いています。
表示例
.svg "radialGradient")
（３） spreadMethod 属性
グラデーションは spreadMethod 属性によってその敷き詰め方法を設定することができます。
pad では、グラデーションは１回だけです。グラデーション以外の部分は両端の単色で塗られます。
repeat では、グラデーションは繰り返し行われます。グラデーションの勾配は一定です。
reflect では、グラデーションは、グラデーションの勾配が逆になり繰り返し行われます。
次の図は青い線の通っている場所の色のようにグラデーションが変化していくことを示しています。
<svg viewbox="0 0 440 160" width="440" height="160"> <defs> <radialGradient id="g1" gradientUnits="userSpaceOnUse" cx="80" cy="80" r="30" spreadMethod="pad"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> <radialGradient id="g2" gradientUnits="userSpaceOnUse" cx="220" cy="80" r="30" spreadMethod="repeat"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> <radialGradient id="g3" gradientUnits="userSpaceOnUse" cx="360" cy="80" r="30" spreadMethod="reflect"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> </defs> <rect x="20" y="20" width="120" height="120" fill="url(#g1)"/> <rect x="160" y="20" width="120" height="120" fill="url(#g2)"/> <rect x="300" y="20" width="120" height="120" fill="url(#g3)"/> </svg>
spreadMethod 属性によってグラデーションの敷き詰め方法が変わります。なお、点線は理解の助けになるように別途描いています。
表示例
b.svg "radialGradient")
（４） cx、cy、r、fx、fy 属性
焦点 (fx,fy) から半径 r の円周に向かう勾配ベクトルになります。fx、fy が指定されていなければ cx、cy と同じになります。
cx、cy や fx、fy は、gradientUnits="userSpaceOnUse" の場合は、X 座標、Y 座標で、gradientUnits="objectBoundingBox" の場合は、0～1 あるいは 0%～100% を指定します。
<svg viewbox="0 0 500 140" width="500" height="140"> <defs> <radialGradient id="g1"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> <radialGradient id="g2" fx="0.25"> <stop offset="0" stop-color="green"/> <stop offset="1" stop-color="cyan"/> </radialGradient> <radialGradient id="g3" cx="0.5" cy="0.5" fx="0.3" fy="0.3"> <stop offset="0" stop-color="cyan"/> <stop offset="0.99" stop-color="green"/> <stop offset="1" stop-color="white"/> </radialGradient> </defs> <rect x="20" y="20" width="100" height="100" fill="url(#g1)"/> <rect x="140" y="20" width="100" height="100" fill="url(#g2)"/> <rect x="260" y="20" width="100" height="100" fill="url(#g3)"/> </svg>
左は、省略してあるので、中心 (cx,cy)、焦点 (fx,fy) とも矩形の中央になり、中心からのグラデーションになります。
二番目は、中心 (cx,cy) は矩形の中央ですが、焦点 (fx,fy) は左から 25% の位置になり、そこを中心としたグラデーションになります。
表示例
a.svg "radialGradient")
また、グラデーションの始点と終点は、fx、fy、r 属性だけでなく、stop 要素の offset でも決まります。
<svg viewbox="0 0 500 160" width="500" height="160"> <defs> <radialGradient id="g1" r="40%"> <stop offset="50%" stop-color="green"/> <stop offset="100%" stop-color="azure"/> </radialGradient> <radialGradient id="g2" r="80%"> <stop offset="25%" stop-color="green"/> <stop offset="50%" stop-color="azure"/> </radialGradient> </defs> <rect x="20" y="20" width="300" height="50" fill="url(#g1)"/> <rect x="20" y="100" width="300" height="50" fill="url(#g2)"/> </svg>
上は、radialGradient 要素で指定された 0% ～ 40%（グレイの実線）が勾配ベクトルになりますが、stop 要素で 50% ～ 100% となっているのでので、実際のグラデーションは 20%（=40%*50%）～ 40%（=40%*100%）になります。
下は、radialGradient 要素で指定された 0% ～ 80%（グレイの実線）が勾配ベクトルになりますが、stop 要素で 25% ～ 50% となっているのでので、実際のグラデーションは 20%（=80%*25%）～ 40%（=80%*50%）になります。
表示例
b.svg "radialGradient")
１３．７ パターン (pattern)
pattern 要素を用いると矩形パターンを用いた敷き詰めを指定することができます。
pattern 要素
パターンの敷き詰めを行う。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| patternUnits | pattern 要素の x、y、width、height 属性の座標系 | × | |
| userSpaceOnUse | 図形が描画される座標系（SVG 全体の座標） | ||
| objectBoundingBox | 図形が内包する座標系（図形内の座標）（規定値） | ||
| patternContentUnits | パターン（敷き詰める図形）の座標系 | × | |
| userSpaceOnUse | 図形が描画される座標系（SVG 全体の座標）（規定値） | ||
| objectBoundingBox | 図形が内包する座標系（図形内の座標） | ||
| patternTransform | 変形関数（transform と同じ） ただし、複数の関数を指定した場合は後ろから演算される | × | |
| viewBox | 空白区切りの4つの整数 | パターンの 左上の X 座標と Y 座標、そして幅と高さ（規定値：0 0 width height） | × |
| preserveAspectRatio | 拡縮方式（規定値：xMidYMid meet） | × | |
| none | 均等な拡縮をしない。元の画像は、表示領域に合致するように必要なら不均等に拡縮し、すべてを表示領域内に表示する。 | ||
| meet | 均等に拡縮し元の画像のすべてを表示領域内に表示する | ||
| slice | 均等に拡縮し表示領域をはみ出しても表示領域に隙間がないように元の画像を表示する | ||
| href | ID | 画像の URI | ○ |
| 属性名 | userSpaceOnUse | objectBoundingBox | 必須 | ||
|---|---|---|---|---|---|
| 属性値 | 説明 | 属性値 | 説明 | ||
| x | 数値 | 基準点の X 座標（規定値：0） | 0～1、0%～100% | 基準点の、左からの位置（規定値：0） | × |
| y | 数値 | 基準点の Y 座標（規定値：0） | 0～1、0%～100% | 基準点の、上からの位置（規定値：0） | × |
| width | 数値 | パターンを繰り返す幅（規定値：0） | 0～1、0%～100% | パターンを繰り返す幅（規定値：0） | × |
| height | 数値 | パターンを繰り返す高さ（規定値：0） | 0～1、0%～100% | パターンを繰り返す高さ（規定値：0） | × |
基準点：パターンを埋め始める基準となる点（この座標に埋め込むパターンの左上点が位置付けられる）
（１） patternUnits 属性
pattern 要素の座標系（x、y、width、height）の設定をします。
userSpaceOnUse は、図形が描画されている SVG の座標系で、transform 属性が指定されていなければ通常 SVG 要素などの viewBox から定まるものです。
objectBoundingBox は、図形を囲む矩形を考え、その左上を原点（0,0）とし、左下を（1,1）としたものです。
|
|
|
|
楕円をパターンで敷き詰めることをします。敷き詰めるパターンは です。 | |
<svg viewbox="0 0 200 100" width="200" height="100"> <pattern id="p" x="5" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse"> <circle cx="15" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p)"/> </svg> |
<svg viewbox="0 0 200 100" width="200" height="100"> <pattern id="p" x="0.036" y="0.125" width="0.143" height="0.25" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse"> <circle cx="15" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p)"/> </svg> |
|
この例のパターンは userSpaceOnUse なので、楕円に隙間なくパターンを敷き詰めようとしたら、pattern 要素の width や height は、パターンの幅や高さになります。 また、パターンは viewbox の (x,y) から埋められ、楕円はその一部を切り取った模様になります。 なお、色の薄いパターンなどは理解の助けになるように別途描いています。 |
この例のパターンは objectBoundingBox なので、楕円に隙間なくパターンを敷き詰めようとしたら、pattern 要素の width はパターンの幅／楕円の幅、height はパターンの高さ／楕円の高さ になります。 また、パターンは楕円を内接する矩形の左上から (x,y) の位置から埋められ、楕円はその一部を切り取った模様になります。 なお、色の薄いパターンなどは理解の助けになるように別途描いています。 |
|
表示例 userSpaceOnUse
b1.svg "pattern")
|
表示例 objectBoundingBox
b2.svg "pattern")
|
（２） patternContentUnits 属性
パターン（敷き詰める図柄）の座標系（circle の cx、cy、r や rect の x、y、width、height など）の設定をします。
楕円をパターンで敷き詰めることをします。敷き詰めるパターンは です。
<svg viewbox="0 0 200 100" width="200" height="100"> <pattern id="p" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p)"/> </svg> |
<svg viewbox="0 0 200 100" width="200" height="100"> <pattern id="p" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox"> <circle cx="0.071" cy="0.125" r="0.071" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p)"/> </svg> |
|
この例のパターンは userSpaceOnUse なので、パターンの座標系は viewbox の座標になります。 なお、色の薄いパターンなどは理解の助けになるように別途描いています。 |
この例のパターンは objectBoundingBox なので、座標系は塗りつぶす楕円に対する割合になります。circle の cx と r は patern 要素の width／楕円の幅／２、cy は pattern 要素の height／楕円の高さ／２ になります。 なお、色の薄いパターンなどは理解の助けになるように別途描いています。 |
|
表示例 userSpaceOnUse
a1.svg "pattern")
|
表示例 objectBoundingBox
a2.svg "pattern")
|
（３） patternTransform 属性
patternTransform属性によって、パターンを変換することができます。パターンを施す際の基準となる（gradientUnitsから定まる）座標軸が予めこの属性によって変換されてからパターンの敷き詰めが行われます。
transform 属性と同様に、matrix、translate、rotate、scale、skewX、skewY 関数を空白またはカンマ区切りで列挙します。
ただし、patternTransform は後ろから実行されます。
<svg viewbox="0 0 600 100" width="600" height="100"> <pattern id="p1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" patternTransform="rotate(-45)"> <circle cx="10" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p1)"/> <pattern id="p2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" patternTransform="scale(0.5,1) rotate(-45)"/> <circle cx="10" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="300" cy="50" rx="70" ry="40" fill="url(#p2)"/> <pattern id="p3" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" patternTransform="rotate(-45) scale(0.5,1)"> <circle cx="10" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="300" cy="50" rx="70" ry="40" fill="url(#p3)"/> </svg>
左の例では、反時計回りに 45度回転させています。中央の例では、反時計回りに 45度回転させてから、横方向に半分の大きさにしています。右の例では、横方向に半分の大きさにしてから、反時計回りに 45度回転させています。
なお、グレイの線は理解の助けになるように別途描いています。
表示例
.svg "pattern")
（４） viewbox 属性
図形を埋めるために使用するパターンの範囲を指定します。
<svg viewbox="0 0 400 100" width="400" height="100"> <pattern id="p1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" viewbox="10 10 10 10"> <circle cx="10" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p1)"/> <pattern id="p2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" viewbox="0 0 10 10"> <circle cx="10" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p2)"/> </svg>
左側は、グレイの枠で囲ったパターン の一部（左上(10,10)で幅10高さ10の矩形）を幅20高さ20に拡大して埋めています。右側は、グレイの枠で囲ったパターンの一部（左上(0,0)で幅10高さ10の矩形）をやはり幅20高さ20に拡大して埋めています。
表示例
（５） preserveAspectRatio 属性
viewbox で指定したパターンと width、height で指定した領域とでサイズが異なる場合、何らかの方法で拡縮が必要になります。この方法を指定するのが preserveAspectRatio 属性です。
拡縮には３つの方法があり、これらと画像の拡縮の基準を表す xMinYMin～xMaxYMax とを組み合わせることで拡縮処理を定義します。
| none | 縦横比は維持されず、元の画像が表示領域いっぱいに表示される |
| meet | 縦横比は維持されつつ、元の画像が表示領域にすべて表示される |
| slice | 縦横比は維持されつつ、縦か横を表示領域の最大限に広げる（一部ははみ出ることになる。はみ出た部分は、表示されない） |
記述例
<svg viewbox="0 0 450 100" width="450" height="100"> <pattern id="p1" x="0" y="0" width="20" height="40" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" viewbox="0 0 20 20" preserveAspectRatio="xMidYMin meet"> <circle cx="10" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p1)"/> <pattern id="p2" x="0" y="0" width="20" height="40" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" viewbox="0 0 20 20" preserveAspectRatio="xMinYMid slice"> <circle cx="10" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="300" cy="50" rx="70" ry="40" fill="url(#p2)"/> </svg>
左側は、xMidYMin meet なので縮小してパターンの全体を上詰めに埋められます。右側は、xMinYMid slice なので左詰めにしてはみ出た部分を切り捨てた形のパターンで埋められます。
表示例
１３．８ マーカー (marker)
marker 要素は、矢印などのマーカーを描画するグラフィックを定義します。
マーカーは通常図形の右側が線の向きに合わされて描画されますが、orient 属性を指定することで向きを固定することも出来ます。
marker 要素
矢印などのマーカーを描画するグラフィックを定義する。
マーカーにする図形の座標は、viewbox の範囲（viewbox の指定がなければ (0,0)～(markerWidth,markerHeight) ）で指定する。
属性
| 属性名 | userSpaceOnUse | strokeWidth | 必須 | ||
|---|---|---|---|---|---|
| 属性値 | 説明 | 属性値 | 説明 | ||
| markerWidth | 数値 | マーカーの幅（規定値：3） | 倍率 | 線の太さに対する倍率で指定した幅（規定値：3） | × |
| markerHeight | 数値 | マーカーの高さ（規定値：3） | 倍率 | 線の太さに対する倍率で指定した高さ（規定値：3） | × |
line、path、polyline、polygon の各要素は、marker 要素で定義したマーカー図形を marker-start（始点）、marker-mid（頂点）、marker-end（終点）属性から参照します。
（１） refX、refY 属性
マーカーの位置を正確に揃えるための基準となる点の座標です。マーカーが回転するときの中心にもなります。
この例では、マーカーの左上、中央、右下を基準点にしています。
記述例
<svg viewbox="0 0 400 120" width="400" height="120"> <marker id="m1" refX="0" refY="0" markerWidth="20" markerHeight="20" viewbox="0 0 20 20"> <rect x="0" y="0" width="20" height="20" stroke="none" fill="red" fill-opacity="0.2"/> </marker> <marker id="m2" refX="10" refY="10" markerWidth="20" markerHeight="20" viewbox="0 0 20 20"> <rect x="0" y="0" width="20" height="20" stroke="none" fill="red" fill-opacity="0.2"/> </marker> <marker id="m3" refX="20" refY="20" markerWidth="20" markerHeight="20" viewbox="0 0 20 20"> <rect x="0" y="0" width="20" height="20" stroke="none" fill="red" fill-opacity="0.2"/> </marker> <line x1="10" y1="20" x2="110" y2="20" stroke="black" stroke-width="1" marker-end="url(#m1)"/> <line x1="10" y1="60" x2="110" y2="60" stroke="black" stroke-width="1" marker-end="url(#m2)"/> <line x1="10" y1="100" x2="110" y2="100" stroke="black" stroke-width="1" marker-end="url(#m3)"/> </svg>
表示例
.svg "marker")
（２） markerUnits 属性
markerUnits 属性は、userSpaceOnUse を指定してマーカーのサイズを描画カンバスにおける絶対サイズ（marker 要素の viewbox）にするか、もしくは strokeWidth を指定して先端の太さに対する倍率にするかを指定します。
userSpaceOnUse の場合に、marker 要素に viewbox が記述されていない場合は、規定値の viewbox="0 0 markerWidth markerHeight" が使用されます。
なお、マーカーにする図形の座標は、viewbox の範囲で指定します。
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <marker id="m1" refX="15" refY="15" markerWidth="30" markerHeight="30" markerUnits="userSpaceOnUse"> <polygon points="0,0 15,15 0,30 30,15" stroke="none" fill="red"/> </marker> <marker id="m2" refX="1.5" refY="1.5" markerWidth="3" markerHeight="3" markerUnits="strokeWidth"> <polygon points="0,0 1.5,1.5 0,3 3,1.5" stroke="none" fill="red"/> </marker> <line x1="10" y1="35" x2="170" y2="35" stroke="black" stroke-width="5" marker-end="url(#m1)"/> <line x1="10" y1="75" x2="170" y2="75" stroke="black" stroke-width="10" marker-end="url(#m1)"/> <line x1="210" y1="35" x2="370" y2="35" stroke="black" stroke-width="5" marker-end="url(#m2)"/> <line x1="210" y1="75" x2="370" y2="75" stroke="black" stroke-width="10" marker-end="url(#m2)"/> </svg>
左側は線の太さに関係なく矢印の大きさは 30×30 ですが、右側は線の太さの３倍と指定していますので、上は 15×15、下は 30×30 になります。
なお、viewbox は指定していませんので、左側のマーカー（m1）は viewbox="0 0 30 30"、右側のマーカー（m2）は viewbox="0 0 3 3" が使用されます。
表示例
.svg "marker")
（３） viewbox 属性
マーカーを描く座標の基準を指定します。例えば次の polygon 要素の points 属性で指定する座標やサイズは viewbox で指定された座標内で描かれます。
ただし、実際に描かれるマーカーの大きさは、markerWidth と markerHeight によっても変わります。
記述例
<svg viewbox="0 0 500 200" width="500" height="200"> <marker id="m1" refX="5" refY="5" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 10 10"> <polygon points="0,0 5,5 0,10 10,5" stroke="none" fill="red"/> </marker> <marker id="m2" refX="10" refY="10" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 10 10"> <polygon points="0,0 10,10 0,20 20,10" stroke="none" fill="red"/> </marker> <marker id="m3" refX="5" refY="5" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 20 20"> <polygon points="0,0 5,5 0,10 10,5" stroke="none" fill="red"/> </marker> <marker id="m4" refX="10" refY="10" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 20 20"> <polygon points="0,0 10,10 0,20 20,10" stroke="none" fill="red"/> </marker> <line x1="10" y1="50" x2="170" y2="50" stroke="black" stroke-width="10" marker-end="url(#m1)"/> <line x1="10" y1="140" x2="170" y2="140" stroke="black" stroke-width="10" marker-end="url(#m2)"/> <line x1="250" y1="50" x2="410" y2="50" stroke="black" stroke-width="10" marker-end="url(#m3)"/> <line x1="250" y1="140" x2="410" y2="140" stroke="black" stroke-width="10" marker-end="url(#m4)"/> </svg>
実際に描かれるマーカーの座標は viewbox に対する比率によって決まります。
例えば、マーカーにする図形の X座標が同じ 10 でも、viewbox の 幅が 10 のときは viewbox の右端になりますが、20 のときは viewbox の中央になります。そして、viewbox 自体の大きさも markerUnits が strokeWidth のときには線の太さによって変わります。
この例では、markerUnits が strokeWidth、すべての markerWidth と markerHeight が共に 5 で、線の太さは 10 なので、すべての viewbox が 横（5×10）、縦（5×10） の 50 四方の大きさになります。そして、マーカーは viewbox に対する比率で大きさが決まり描かれます。
なお、グレイの線は viewbox で、ピンクは viewbox をはみ出して描かれなかったマーカーです。理解の助けになるように別途描いています。
表示例
svg タグを記述したファイルを img タグで指定して画像ファイルのように表示することができます。
しかし、多くのブラウザでは viewbox が無視されてしまうようです。
記述例
<svg viewbox="0 0 250 100" width="250" height="100"> <marker id="m1" refX="5" refY="5" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 10 10"> <polygon points="0,0 5,5 0,10 10,5" stroke="none" fill="red"/> </marker> <line x1="10" y1="50" x2="170" y2="50" stroke="black" stroke-width="10" marker-end="url(#m1)"/> <text x="10" y="20" font-size="14" fill="chocolate">svg タグを直接記述</text> </svg> <img src="arrow.svg" width="250" height="100">
arrow.svg
<svg viewbox="0 0 250 100" width="250" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <marker id="m1" refX="5" refY="5" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 10 10"> <polygon points="0,0 5,5 0,10 10,5" stroke="none" fill="red"/> </marker> <line x1="10" y1="50" x2="170" y2="50" stroke="black" stroke-width="10" marker-end="url(#m1)"/> <text x="10" y="20" font-size="14" fill="chocolate">img タグで埋め込み</text> </svg>
表示例
a.svg "marker")
（４） orient 属性
マーカーがどのように回転されるかを指示します。
記述例
<svg viewbox="0 0 400 130" width="400" height="130"> <marker id="m1" refX="25" refY="32" markerWidth="50" markerHeight="32" markerUnits="userSpaceOnUse" orient="auto"> <image x="0" y="0" width="50" height="32" href="car.png"/> </marker> <marker id="m2" refX="0" refY="35" markerWidth="30" markerHeight="40" markerUnits="userSpaceOnUse"> <image x="0" y="0" width="30" height="40" href="flag.png"/> </marker> <path d="M40,100Q70,20 120,70T220,40" stroke="black" stroke-width="3" fill="none" marker-start="url(#m1)" marker-mid="url(#m1)" marker-end="url(#m1)"/> <path d="M240,100Q270,20 320,70T420,40" stroke="black" stroke-width="3" fill="none" marker-start="url(#m2)" marker-mid="url(#m2)" marker-end="url(#m2)"/> </svg>
左はマーカーを表示する要素の向きに添うようにマーカーを回転させています。右は回転させずに常に垂直に表示しています。
表示例
（５） marker-start、marker-mid、marker-end 属性
line、path、polyline、polygon の各要素は、marker 要素で定義したマーカー図形を marker-start（始点）、marker-mid（頂点）、marker-end（終点）属性から参照します。
記述例
<svg viewbox="0 0 550 150" width="550" height="150"> <marker id="m1" refX="15" refY="15" markerWidth="30" markerHeight="30" markerUnits="userSpaceOnUse" orient="auto"> <polygon points="0,0 15,15 0,30 30,15 " stroke="none" fill="red"/> </marker> <marker id="m21" refX="6" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse"> <circle cx="6" cy="6" r="6" stroke="none" fill="blue"/> </marker> <marker id="m22" refX="3" refY="3" markerWidth="6" markerHeight="6" markerUnits="userSpaceOnUse"> <circle cx="3" cy="3" r="3" stroke="none" fill="green"/> </marker> <marker id="m23" refX="4" refY="4" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse"> <circle cx="4" cy="4" r="4" stroke="none" fill="red"/> </marker> <path d="M20,80 l80,-50 l80,30 l-30,50 l-70,20" stroke="black" stroke-width="3" fill="none" marker-start="url(#m1)" marker-mid="url(#m1)" marker-end="url(#m1)"/> <path d="M220,80 l80,-50 l80,30 l-30,50 l-70,20 z" stroke="black" stroke-width="3" fill="none" marker-start="url(#m1)" marker-mid="url(#m1)" marker-end="url(#m1)"/> <polyline points="430,20 430,40 530,40 480,60 480,20" stroke="black" stroke-width="3" fill="none" marker-start="url(#m21)" marker-mid="url(#m22)" marker-end="url(#m23)"/> <polygon points="430,100 430,120 530,120 480,140 480,100" stroke="black" stroke-width="3" fill="none" marker-start="url(#m21)" marker-mid="url(#m22)" marker-end="url(#m23)"/> </svg>
表示例
.svg "marker")
１３．９ グループ化、定義
１３．９ ．１ グループ化 (g)
g 要素は図形をグループ化します。複数の図形を論理的にグループ化しグラフィック構造を明確化し、スタイルの設定を容易にします。ただし、位置やサイズについては g 要素にまとめることはできません。
また、g 要素はネストして指定することができ、同じ属性が指定されていた場合はより内側に指定されている属性が優先されます。
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <g stroke="blue" stroke-width="3" fill="none"> <g stroke="green" stroke-dasharray="5 2"> <line x1="20" y1="20" x2="100" y2="20"/> <line x1="20" y1="40" x2="100" y2="40" stroke="red"/> </g> <line x1="20" y1="60" x2="100" y2="60"/> </g> </svg>
それぞれの図形は、属しているグループの属性を引き継ぎますが、図形自身に指定されていればそれが優先されます。中央の直線は グループで指定された緑ではなく赤で表示されています。
表示例
ただし、opacity のような属性は、それまでの属性値にさらに影響を与えます。
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <g stroke="none" fill="blue" opacity="0.4"> <rect x="20" y="20" width="60" height="60"/> <rect x="100" y="20" width="60" height="20"/> <rect x="100" y="20" width="60" height="20" opacity="0.6"/> </g> </svg>
右下の矩形は、opacity の属性値が 0.4 から 0.6 に置き換えられるのならば色が濃くなっていなけれなならないはずですが、さらに薄くなっているのがわかります。
表示例
１３．９ ．２ 定義 (defs)
defs 要素は各種情報（テンプレートとなる図形やグラデーション等）を定義します。<defs>～</defs> の間に記述しておけば、どのような要素も描画されません。
そのため、marker や pattern 要素などのもともと描画対象ではない要素は defs 要素内に入れておく必要はありませんが、用途や意味合いを含めて defs 要素を使って整理しておいたほうが良いでしょう。
defs 要素
他の要素から参照するための各種情報を定義する。
属性
なし
記述例
<svg viewbox="0 0 400 60" width="400" height="60"> <defs> <path id="d1" d="M50,20 Q80,50 110,30 T180,40"/> </defs> <text fill="blue" font-size="12"> <textPath href="#d1">碧い地球をゆらゆら泳いでく</textPath> </text> </svg>
表示例
１３．９ ．３ シンボル (symbol)
symbol 要素を用いると、複数の図形を一括して一つの図形として扱うことができます。viewBox 属性によって独自の座標系を定義し、<symbol>～</symbol> の間にシンボル化したい図形を記述します。symbol 要素とその中の要素はそれだけで描画されることはありません。
（１） viewbox 属性
シンボルの描画領域を定義します。
<svg viewbox="0 0 400 100" width="400" height="100"> <symbol id="s1" viewbox="0 0 20 40" preserveAspectRatio="none"> <rect x="0" y="0" width="40" height="40" fill="blue"/> <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/> </symbol> <symbol id="s2" viewbox="0 0 40 40" preserveAspectRatio="none"> <rect x="0" y="0" width="40" height="40" fill="blue"/> <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/> </symbol> <symbol id="s3" viewbox="0 0 40 20" preserveAspectRatio="none"> <rect x="0" y="0" width="40" height="40" fill="blue"/> <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/> </symbol> <use href="#s1" x="0" y="60" width="40" height="40"/> <use href="#s2" x="100" y="60" width="40" height="40"/> <use href="#s3" x="280" y="0" width="40" height="40"/> </svg>
背景色がグレーの部分が symbol 要素の定義部分のイメージです。その中のグレーの枠の中の色の濃い部分が viewbox です。
そして、そのシンボルを使用した use 要素が width と height のサイズ（すべて 40 と 40）に拡縮され表示されます。
上の例で表示されるのは、下2つと一番右の1つです。あとは理解の助けになるように別途描いています。
表示例
（２） preserveAspectRatio 属性
viewbox で指定したパターンと width、height で指定した領域とでサイズが異なる場合、何らかの方法で拡縮が必要になります。この方法を指定するのが preserveAspectRatio 属性です。
拡縮には３つの方法があり、これらと画像の拡縮の基準を表す xMinYMin～xMaxYMax とを組み合わせることで拡縮処理を定義します。
| none | 縦横比は維持されず、元の画像が表示領域いっぱいに表示される |
| meet | 縦横比は維持されつつ、元の画像が表示領域にすべて表示される |
| slice | 縦横比は維持されつつ、縦か横を表示領域の最大限に広げる（一部ははみ出ることになる。はみ出た部分は、表示されない） |
記述例
<svg viewbox="0 0 400 150" width="400" height="150"> <symbol id="s1" viewbox="0 0 40 40" preserveAspectRatio="none"> <rect x="0" y="0" width="40" height="40" fill="blue"/> <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/> </symbol> <symbol id="s2" viewbox="0 0 40 40" preserveAspectRatio="xMidYMid meet"> <rect x="0" y="0" width="40" height="40" fill="blue"/> <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/> </symbol> <symbol id="s3" viewbox="0 0 40 40" preserveAspectRatio="xMidYMid slice"> <rect x="0" y="0" width="40" height="40" fill="blue"/> <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/> </symbol> <use href="#s1" x="100" y="0" width="20" height="40"/> <use href="#s1" x="200" y="0" width="40" height="40"/> <use href="#s1" x="300" y="0" width="40" height="20"/> <use href="#s2" x="100" y="50" width="20" height="40"/> <use href="#s2" x="200" y="50" width="40" height="40"/> <use href="#s2" x="300" y="50" width="40" height="20"/> <use href="#s3" x="100" y="100" width="20" height="40"/> <use href="#s3" x="200" y="100" width="40" height="40"/> <use href="#s3" x="300" y="100" width="40" height="20"/> </svg>
グレイの線は、use 要素で指定された width と height で決定する矩形です。理解の助けになるように別途描いています。
表示例
１３．９ ．４ 利用 (use)
defs 要素はある要素の共通の属性を定義する場合にも使用できます。そして、それを使用して図形を描くのに use 要素を使用します。
定義された情報を参照するには、利用する defs 要素の ID を href 属性に記述します。
use 要素
定義された各種情報を利用する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| href | ID | 利用する定義の ID | ○ |
記述例
<svg viewbox="0 0 400 120" width="400" height="120"> <defs> <circle id="d1" r="40" stroke="blue" stroke-width="3"/> </defs> <use href="#d1" x="60" y="30" stroke="green"/> <use href="#d1" x="100" y="50" stroke="none" fill="green"/> <use href="#d1" x="130" y="70" r="50" stroke-width="1" stroke-dasharray="5 1" fill="none"/> </svg>
defs 要素内で指定された属性は基本的に変更できないようです。
表示例
よく使用する図形を定義しておいて再利用することもできます。
記述例
<svg viewbox="0 0 500 100" width="500" height="100"> <defs> <polygon id="triangle" d="50,15 10,85 90,85"/> <path id="moon" d="M 20,20 A 35,35 0 1,1 20,80 A 20,20 0 1,0 20,20 Z"/> <polygon id="pentagon" points="40,0 2,28 16,72 64,72 78,28"/> <polygon id="hexagon" points="40,0 5,20 5,60 40,80 75,60 75,20"/> <polygon id="star" points="40,0 16,72 78,28 2,28 64,72"/> </defs> <use href="#triangle" x="0" y="0" fill="green"/> <use href="#moon" x="100" y="0" fill="yellow"/> <use href="#pentagon" x="200" y="0" fill="pink"/> <use href="#hexagon" x="300" y="0" fill="skyblue"/> <use href="#star" x="400" y="0" fill="orange"/> </svg>
表示例
１３．１０ クリッピングとマスキング
クリッピングはある要素のうち、他の場所で定義された一部分を取り除くことを指します。この場合は半透明効果をかけることはできず、完全に表示するか全く表示しないかの扱いになります。
マスキングは半透明効果やマスクの濃淡値を考慮することで、ソフトエッジ効果をかけることができます。
１３．１０．１ クリッピング (clipPath)
クリッピングを行う際には、クリッピングパスとクリッピング領域という２つの概念が重要となります。クリッピングパスは、要素を切り取る形を現すパス（基本的なシェイプや複雑な多角形）で、クリッピング領域を区切り取るものです。clipPath 要素で定義します。クリッピング領域は、クリッピングパス内の範囲をすべて含む領域のことです。
基本的な図形である rect や circle、画像を表示する image 要素などに clip-path 属性でクリッピングパスを指定することでクリッピングを実現します。
ようするにクリッピングパスとクリッピング領域とが重なる部分のみが表示されます。
clipPath 要素
clipPath 要素で囲い定義した形で、他の場所で定義された一部分を取り除く。
属性
なし左側は青色の矩形を星型でクリッピングしています。中央は画像を同じ星型でクリッピングしています。右側はグラデーションされた矩形を CLIP という文字列でクリッピングしています。
記述例
<svg viewbox="0 0 500 100" width="500" height="100"> <!-- クリッピングパス --> <clipPath id="clip1"> <polygon points="40,0 16,72 78,28 2,28 64,72"/> </clipPath> <clipPath id="clip2"> <text font-weight="bold" font-size="72pt" textLength="180" dominant-baseline="text-before-edge">CLIP</text> </clipPath> <!-- グラデーション --> <defs> <linearGradient id="gr" gradientUnits="objectBoundingBox"> <stop offset="0" stop-color="blue"/> <stop offset="1" stop-color="yellow"/> </linearGradient> </defs> <!-- クリッピング領域 --> <rect width="100" height="72" stroke="none" fill="blue" clip-path="url(#clip1)"/> <image width="74" height="74" href="bear.png" clip-path="url(#clip1)" transform="translate(100,0)"/> <rect width="180" height="100" stroke="none" fill="url(#gr)" clip-path="url(#clip2)" transform="translate(200,0)"/> </svg>
表示例
アニメーションでクリッピングすることもできます。アニメーションについては「１３．１２ アニメーション」を参照してください。
記述例
<svg viewbox="0 0 100 100" width="100" height="100"> <!-- クリッピングパス --> <clipPath id="clip3"> <circle cx="46" cy="25"> <animate attributeType="XML" attributeName="r" begin="0" dur="5" from="0" to="50" repeatCount="indefinite"/> </circle> </clipPath> <!-- クリッピング領域 --> <img href="bear.png" clip-path="url(#clip3);"/> </svg>
表示例
１３．１０．２ マスク (mask)
マスキングでもクリッピングと同じように、マスキングパスとマスキング領域という２つの概念が重要となります。
マスキングパスは、要素を切り取る形を現すパス（基本的なシェイプや複雑な多角形）で、マスキング領域を区切り取るものです。mask 要素で定義します。
マスキング領域は、マスキングパス内の範囲をすべて含む領域のことです。基本的な図形である rect や circle、画像を表示する image 要素などに mask 属性でマスキングパスを指定することでマスキングを実現します。
ようするにマスキングパスとマスキング領域とが重なる部分のみが表示されます。ただし、マスキングパスの色や透明度によって濃淡の差をつけることができます。
mask 要素
mask 要素で囲い定義した形で、他の場所で定義された一部分を取り除く。
属性
なし上段は星型のマスキングパスの色を白から黒に近い灰色（黒にすると表示されなくなる）まで変えてマスキングしています。
下段は星型のマスキングパスの不透明度（opacity）を 1 から 0.1（0 にすると表示されなくなる）まで変えてマスキングしています。
マスキングの、色チャンネルとアルファチャンネル（透明度）の値から計算されます。詳しい計算方法は省略しますが、輝度が高いほうがよりマスク領域が表示されます。
記述例
<svg viewbox="0 0 700 220" width="700" height="220"> <!-- マスキングパス --> <mask id="mask1"> <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#FFFFFF"/> </mask> <mask id="mask2"> <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#888888"/> </mask> <mask id="mask3"> <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#111111"/> </mask> <mask id="mask4"> <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#FFFFFF" opacity="1"/> </mask> <mask id="mask5"> <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#FFFFFF" opacity="0.5"/> </mask> <mask id="mask6"> <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#FFFFFF" opacity="0.1"/> </mask> <!-- マスキング領域 --> <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask1)"/> <image width="74" height="74" href="bear.png" mask="url(#mask1)" transform="translate(100,0)"/> <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask2)" transform="translate(200,0)"/> <image width="74" height="74" href="bear.png" mask="url(#mask2)" transform="translate(300,0)"/> <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask3)" transform="translate(400,0)"/> <image width="74" height="74" href="bear.png" mask="url(#mask3)" transform="translate(500,0)"/> <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask4)" transform="translate(0,100)"/> <image width="74" height="74" href="bear.png" mask="url(#mask4)" transform="translate(100,100)"/> <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask5)" transform="translate(200,100)"/> <image width="74" height="74" href="bear.png" mask="url(#mask5)" transform="translate(300,100)"/> <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask6)" transform="translate(400,100)"/> <image width="74" height="74" href="bear.png" mask="url(#mask6)" transform="translate(500,100)"/> </svg>
表示例
アニメーションでマスクすることもできます。アニメーションについては「１３．１２ アニメーション」を参照してください。
記述例
<svg viewbox="0 0 100 100" width="100" height="100"> <!-- マスキングパス --> <mask id="mask7"> <circle cx="46" cy="25" fill="#FFFFFF"> <animate attributeType="XML" attributeName="r" begin="0" dur="5" from="0" to="50" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="opacity" begin="0" dur="5" from="0" to="1" repeatCount="indefinite"/> </circle> </mask> <!-- マスキング領域 --> <img href="bear.png" mask="url(#mask7);"/> </svg>
表示例
１３．１１ フィルター
CSS にもフィルターがありますが、それは SVG が持つフィルタ効果の一部を最適化したものです。
CSS に比べ、SVG にはより多くのフィルタ効果があり、SVG フィルタの方が遥かに強力で複雑な効果を生み出せます。
一般に画像はその構成する画素毎にrgb値と不透明度（alpha）値とを定めますが、フィルターはこの色に関わる4つの値を画素毎に編集するだけです。
ただし、フィルターによる画像効果は暗黙的なラスタライズを引き起こし、本質的に処理が重いため、掛け過ぎないようにすべきです。また、ブラウザごとの実装状況に大きな隔たりが存在します。基本的な機能は概ね問題なくても、複雑な効果を得ようとした際に、環境によって見た目や動作が異なるばかりか一切動かないといったことも有り得ます。従って、できる限り構造を簡潔にしたり充分な検証を行う必要があります。
filter 要素の子要素として、複数の原始フィルターを記述します。原始フィルターは基本的な画像操作で、これを組み合わせることでより複雑なフィルター操作を定義します。原始フィルターは上から順に実行され、原始フィルターごとに記述された in 属性に設定された画像にフィルターを掛け、result 属性に設定した名称でその結果を保持します。つまり、前のフィルターの結果を次のフィルターの in 属性に指定することによって繰り返し画像効果を重ねることができるわけです。そして、最後に実行されたフィルターの結果が描画されることになります。
記述例
<svg viewbox="0 0 240 120" width="240" height="120"> <defs> <filter id="filter"> <!-- 図形の影を取得しぼかす。結果を blur として保持する --> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <!-- ぼかした結果をずらして、offsetBlurとして保持する --> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feMerge> <!-- offsetBlur の上に元のグラフィックを重ねる --> <feMergeNode in="offsetBlur"/> <!-- ずらした影 --> <feMergeNode in="SourceGraphic"/> <!-- 元の図形 --> </feMerge> </filter> </defs> <image x="20" y="0" width="74" height="74" href="bear.png" filter="url(#filter)"/> </svg>
表示例
上の例は次のように原始フィルターが適用されて画像に影が付けられます。
１３．１１．１ フィルター (filter)
フィルタ効果は filter 要素により定義されます。
filter 要素は一連の 原始フィルター を子要素として持ちます。それぞれの原始フィルタは、一つ以上の入力から単機能の基礎的なグラフィックス演算（ぼかしや照明効果など）を行い，グラフィック結果を生成します。
元のソースグラフィックや原始フィルタからの生成結果は、他の原始フィルタの入力に利用できます。
filter 要素
元の画像の表示範囲と HTML での表示領域の幅と高さを定義する。
SVG の場合は、左上隅が原点 (0, 0) になる。水平方向は右へ行くにつれて、垂直方向は下に行くほどそれぞれ値が増大する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| x | 整数 | フィルター領域の左上 X座標（規定値：-10%） | × |
| y | 整数 | フィルター領域の左上 Y座標（規定値：-10%） | × |
| width | ピクセル数 | フィルター領域の幅（規定値：120%） | × |
| height | ピクセル数 | フィルター領域の高さ（規定値：120%） | × |
| filterUnits | x、y、width、height に対する座標系 | × | |
| userSpaceOnUse | 現在の利用座標系における値 | ||
| objectBoundingBox | 要素内部の相対比率（規定値） | ||
| primitiveUnits | 原始フィルターの用いる座標系 | × | |
| userSpaceOnUse | 現在の利用座標系における値（規定値） | ||
| objectBoundingBox | 要素内部の相対比率 | ||
| filterRes | X方向画素数 Y方向画素数 | 中間画像の幅と高さを画素数で指示する | × |
| href | SVG 文書片内の別の filter 要素への参照 | × | |
フィルター定義を参照するには、SVG では filter 属性でフィルター定義の ID を指定します。また、一般の HTML 要素からはスタイルシートで指定します。
記述例
<!-- フィルター定義 --> <svg viewbox="0 0 0 0" width="0" height="0"> <defs> <filter id="filter"> <feGaussianBlur stdDeviation="2"/> <!-- 原始フィルター（ぼかし） --> </filter> </defs> </svg> <img src="bear.png" style="filter:url(#filter)"> <!-- img 要素からの参照 --> <svg viewbox="0 0 74 74" width="74" height="74"> <!-- SVG image 要素からの参照 --> <image x="0" y="0" width="74" height="74" href="bear.png" filter="url(#filter)"/> </svg>
表示例
img 要素
|
SVG image 要素 |
○ filterUnits 属性
userSpaceOnUse が objectBoundingBox のときは、x、y、width、height は 0.3 や 20% のような元の画像に対する比率を指定します。
userSpaceOnUse が userSpaceOnUse のときは、x、y、width、height は単位をつけない数値で長さを指定します。
記述例
<svg viewbox="0 0 140 100" width="140" height="100"> <defs> <filter id="filter1" filterUnits="objectBoundingBox" x="0.3" y="20%" width="60%" height="0.5"> <feGaussianBlur stdDeviation="1"/> <!-- 原始フィルター（ぼかし） --> </filter> </defs> <image width="74" height="74" href="bear.png" filter="url(#filter1)"/> </svg> <svg viewbox="0 0 120 100" width="120" height="100"> <defs> <filter id="filter2" filterUnits="userSpaceOnUse" x="10" y="20" width="60" height="40"> <feGaussianBlur stdDeviation="1"/> <!-- 原始フィルター（ぼかし） --> </filter> </defs> <image width="74" height="74" href="bear.png" filter="url(#filter2)"/> </svg>
薄い画像や矩形、矢印などは理解の助けになるように別途表示しています。
表示例
○ primitiveUnits 属性
入力画像をその画像空間における現在の位置から指定された移動量だけずらした矩形を指定します。
その矩形と filler 要素の x、y、width、height で定まる矩形とが重なる部分がフィルタリングされます。
userSpaceOnUse が objectBoundingBox のときは、x、y、width、height は 0.3 や 20% のような元の画像に対する比率を指定します。ただし、feGaussianBlur など、機能しない原始フィルターもあるようです。
userSpaceOnUse が userSpaceOnUse のときは、x、y、width、height は単位をつけない数値で長さを指定します。
記述例
<!-- primitiveUnits なし --> <svg viewbox="0 0 140 100" width="140" height="100"> <defs> <filter id="filter" filterUnits="objectBoundingBox" x="10" y="20" width="40" height="30"> <feGaussianBlur stdDeviation="1"/> <!-- 原始フィルター（ぼかし） --> </filter> </defs> <image href="bear.png" width="74" height="74" filter="url(#filter)"/> </svg> <!-- primitiveUnits="objectBoundingBox" --> <svg viewbox="0 0 140 100" width="140" height="100"> <defs> <filter id="filter1" filterUnits="userSpaceOnUse" x="10" y="20" width="40" height="30" filterUnits="objectBoundingBox"> <feGaussianBlur stdDeviation="0"/> <!-- 原始フィルター（ぼかし、0 以外を指定するとフィルタリングされない） --> <feOffset x="30%" y="0.4"/> <!-- 原始フィルター（移動） --> </filter> </defs> <image href="bear.png" width="74" height="74" filter="url(#filter1)"/> </svg> <!-- primitiveUnits="userSpaceOnUse" --> <svg viewbox="0 0 140 100" width="140" height="100"> <defs> <filter id="filter2" filterUnits="userSpaceOnUse" x="10" y="20" width="40" height="30" filterUnits="userSpaceOnUse"> <feGaussianBlur stdDeviation="1"/> <!-- 原始フィルター（ぼかし） --> <feOffset x="30" y="10"/> <!-- 原始フィルター（移動） --> </filter> </defs> <image href="bear.png" width="74" height="74" filter="url(#filter2)"/> </svg>
userSpaceOnUse が objectBoundingBox のときは、feGaussianBlur が機能しないようなので、0 を指定しています。
薄い画像や矩形、矢印などは理解の助けになるように別途表示しています。
表示例
○ filterRes 属性
中間画像の幅と高さを画素数で指示します。
小さ過ぎる値は画質の低下をもたらし、大き過ぎる値は処理速度の低下と多量のメモリ消費をもたらします。
ただし、多くのブラウザでは機能しないようです。
記述例
<!-- filterRes なし --> <svg viewbox="0 0 100 100" width="100" height="100"> <defs> <filter id="filter1" filterUnits="userSpaceOnUse" x="10" y="20" width="40" height="30"> <feGaussianBlur stdDeviation="1"/> <!-- 原始フィルター（ぼかし） --> </filter> </defs> <image href="bear.png" width="74" height="74" filter="url(#filter1)"/> </svg> <!-- filterRes="20 15" --> <svg viewbox="0 0 100 100" width="100" height="100"> <defs> <filter id="filter2" filterUnits="userSpaceOnUse" x="10" y="20" width="40" height="30" filterRes="1 1"> <feGaussianBlur stdDeviation="1"/> <!-- 原始フィルター（ぼかし） --> </filter> </defs> <image href="bear.png" width="74" height="74" filter="url(#filter2)"/> </svg>
表示例
○ href 属性
href 属性を指定した要素に定義されていない属性が href 属性で指定された filter 要素で定義されているときは、この要素に継承されます。
また、古いブラウザでは href ではなく xlink:href でないと機能しないかもしれません。
記述例
<svg viewbox="0 0 300 120" width="300" height="120"> <defs> <filter id="filterA" filterUnits="userSpaceOnUse" x="0" y="20" width="220" height="100"/> <filter id="filterB" href="#filterA"> <!-- filterA を継承した filterB --> <feGaussianBlur stdDeviation="1"/> </filter> <filter id="filterC" xlink:href="#filterA"> <!-- filterA を継承した filterC --> <feGaussianBlur stdDeviation="1"/> </filter> </defs> <image href="bear.png" x="0" y="20" width="74" height="74" filter="url(#filterB)"/> <!-- filterB を参照 --> <image href="bear.png" x="100" y="20" width="74" height="74" filter="url(#filterC)"/> <!-- filterC を参照 --> </svg>
表示例
１３．１１．２ 光源
原始フィルターには光源を必要とするものがあります。グラフィックを立体化し，影もしくは反射光を得るために用いられます。
光源を表す要素として次の3つが定義されており、原始フィルターの子要素として配置します。
（１）平行光源（feDistantLight）
太陽光のような並行な光線になる遠い光源を定義します。
feDistantLight 要素
太陽光のような並行な光線になる遠い光源を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| azimuth | 整数 | 光源方向（XY 平面における X 軸からの角度）（規定値：0） | × |
| elevation | 整数 | 光源方向（XY 平面から Z 軸への角度）（規定値：0） | × |
太陽からの光のような並行な光線になる遠い光源からの光線による影を表示します。
記述例
<svg viewbox="0 0 800 220" width="800" height="220"> <defs> <filter id="filter000_30"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <feDistantLight azimuth="0" elevation="30"/> <!-- 原始フィルター（平行光源） --> </feDiffuseLighting> </filter> <filter id="filter030_30"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <feDistantLight azimuth="30" elevation="30"/> <!-- 原始フィルター（平行光源） --> </feDiffuseLighting> </filter> <!-- 途中略 --> <filter id="filter180_60"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <feDistantLight azimuth="180" elevation="60"/> <!-- 原始フィルター（平行光源） --> </feDiffuseLighting> </filter> </defs> <image href="bear.png" x="20" y="20" width="50" height="74" filter="url(#filter000_30)"/> <image href="bear.png" x="90" y="20" width="50" height="74" filter="url(#filter030_30)"/> <!-- 途中略 --> <image href="bear.png" x="440" y="120" width="50" height="74" filter="url(#filter180_60)"/> </svg>
矢印などは理解の助けになるように別途表示しています。
表示例
（２）平行光源（fePointLight）
電灯のような放射状の光線になる近い光源を定義します。
fePointLight 要素
電灯のような放射状の光線になる近い光源を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| x | 整数 | 光源の X 座標（規定値：0） | × |
| y | 整数 | 光源の Y 座標（規定値：0） | × |
| z | 整数 | 光源の Z 座標（規定値：0） | × |
記述例
<svg viewbox="0 0 750 320" width="750" height="320"> <defs> <filter id="filter10_10_20"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <fePointLight x="10" y="10" z="20"/> <!-- 原始フィルター（点光源） --> </feDiffuseLighting> </filter> <filter id="filter47_10_20"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <fePointLight x="130" y="10" z="20"/> <!-- 原始フィルター（点光源） --> </feDiffuseLighting> </filter> <!-- 途中略 --> <filter id="filter94_94_50"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <fePointLight x="570" y="250" z="50"/> <!-- 原始フィルター（点光源） --> </feDiffuseLighting> </filter> </defs> <image href="bear.png" x="20" y="20" width="60" height="60" filter="url(#filter10_10_20)"/> <image href="bear.png" x="100" y="20" width="60" height="60" filter="url(#filter47_10_20)"/> <!-- 途中略 --> <image href="bear.png" x="510" y="180" width="60" height="60" filter="url(#filter94_94_50)"/> </svg>
光源を表す円などは理解の助けになるように別途表示しています。
表示例
（３）スポットライト光源（feSpotLight）
光源を与えて任意方向に照明効果を与える光源を定義します。照明の当たる角度と光の広がりを設定します。
feSpotLight 要素
電灯のような放射状の光線になる近い光源を定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| x | 整数 | 光源の X 座標（規定値：0） | × |
| y | 整数 | 光源の Y 座標（規定値：0） | × |
| z | 整数 | 光源の Z 座標（規定値：0） | × |
| pointsAtX | 整数 | 光が射す地点の X 座標（規定値：0） | × |
| pointsAtY | 整数 | 光が射す地点の Y 座標（規定値：0） | × |
| pointsAtZ | 整数 | 光が射す地点の Z 座標（規定値：0） | × |
| specularExponent | 整数 | 光の収束度合い（値を大きくするに従い明るい部分が狭まる）（規定値：1） | × |
| limitingConeAngle | 整数 | 光源が投射される範囲を限定する角度 | × |
記述例
<svg viewbox="0 0 800 320" width="800" height="320"> <defs> <!-- pointsAtX、pointsAtY --> <filter id="filter30_30_0"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <feSpotLight x="110" y="10" z="50" pointsAtX="30" pointsAtY="30" pointsAtZ="0" limitingConeAngle="20" specularExponent="1" /> <!-- 原始フィルター（スポットライト） --> </feDiffuseLighting> </filter> <!-- 途中略 --> <!-- specularExponent --> <filter id="filter20_1"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <feSpotLight x="110" y="110" z="50" pointsAtX="50" pointsAtY="150" pointsAtZ="0" limitingConeAngle="20" specularExponent="1" /> <!-- 原始フィルター（スポットライト） --> </feDiffuseLighting> </filter> <!-- 途中略 --> <!-- limitingConeAngle --> <filter id="filter10_30"> <feDiffuseLighting surfaceScale="5"/> <!-- 原始フィルター（照明効果） --> <feSpotLight x="110" y="210" z="50" pointsAtX="50" pointsAtY="250" pointsAtZ="0" limitingConeAngle="10" specularExponent="30" /> <!-- 原始フィルター（スポットライト） --> </feDiffuseLighting> </filter> <!-- 途中略 --> </defs> <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter30_30_0)"/> <image href="bear.png" x="120" y="20" width="74" height="74" filter="url(#filter50_50_0)"/> <image href="bear.png" x="220" y="20" width="74" height="74" filter="url(#filter80_80_0)"/> <image href="bear.png" x="20" y="120" width="74" height="74" filter="url(#filter20_1)"/> <image href="bear.png" x="120" y="120" width="74" height="74" filter="url(#filter20_50)"/> <image href="bear.png" x="220" y="120" width="74" height="74" filter="url(#filter20_100)"/> <image href="bear.png" x="20" y="220" width="74" height="74" filter="url(#filter10_30)"/> <image href="bear.png" x="120" y="220" width="74" height="74" filter="url(#filter15_30)"/> <image href="bear.png" x="220" y="220" width="74" height="74" filter="url(#filter20_30)"/> </svg>
光源を表す円や矢印などは理解の助けになるように別途表示しています。
表示例
１３．１１．３ 原始フィルターの共通属性
原始フィルターには様々な種類がありますが、次の属性は共通して定義されています。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| x | 長さ または 比率 | フィルター領域の左上 X座標（注１）（規定値：0%） | × |
| y | 長さ または 比率 | フィルター領域の左上 Y座標標（注１）（規定値：0%） | × |
| width | 長さ または 比率 | フィルター領域の幅（注１）（規定値：100%） | × |
| height | 長さ または 比率 | フィルター領域の高さ（注１）（規定値：100%） | × |
| in | フィルターの入力画像（規定値：直前の処理結果） | × | |
| SourceGraphic | 元画像情報 | ||
| SourceAlpha | 影（元画像の不透明度情報を黒の不透明度で取得） | ||
| ID名 | ID名で指定された原始フィルターの結果 | ||
| color-interpolation-filters | 画像合成の際の色空間 | × | |
| auto | 自動 | ||
| sRGB | 色補間がガンマ補正されたRGB色空間で行われる | ||
| linearRGB | 色補間がガンマ補正されていないRGB色空間で行われる（規定値） | ||
| result | 名前 | フィルターを施した結果 | × |
（注１） <filter> と <mask> 要素では、x と y は -10%、width と height は 120% となる。
（１）フィルターの範囲（x、y、width、height）
フィルターを施す範囲を指定します。
記述例
<svg viewbox="0 0 120 100" width="120" height="100"> <defs> <filter id="filter"> <feImage href="bear.png" x="30" y="20" width="74" height="74"/> <feBlend in2="SourceGraphic" mode="difference"> </filter> </defs> <circle filter="url(#filter)" cx="50" cy="60" r="25" fill="yellow" stroke="none"> </svg>
表示例
（２）フィルターの入力画像（in）
フィルターの入力画像を指定します。
記述例
<svg viewbox="0 0 800 120" width="800" height="120"> <defs> <filter id="filter1"> <feGaussianBlur in="SourceGraphic" stdDeviation="0"/> </filter> <filter id="filter2"> <feGaussianBlur in="SourceAlpha" stdDeviation="0"/> </filter> </defs> <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter1)"/> <image href="bear.png" x="120" y="20" width="74" height="74" filter="url(#filter2)"/> </svg>
表示例
（３）画像合成の際の色空間（color-interpolation-filters）
画像合成の際の色空間を与えます。
RGB の値が物理的な実際の色とどう対応するかの規格は色々ありますが、Web でやり取りする画像データの殆どは sRGB 規格に合わせたものです。そして、sRGB 規格は多くの場合物理的な輝度と正比例ではなくガンマ補正がかかっています。これは、昔のブラウン管テレビが陰極管の物理特性により入力信号の電圧に対して出力する輝度が比例しなかったので、信号側で補正する事にしたからだそうです。また、人の目は低輝度の変化に敏感、高輝度には鈍感なため、それを補正すると言う意味もあったそうです。
それに対して、ガンマ補正をしていないものを linearRGB をいいます。物理的な輝度に対して素直に比例する値を使うのが linearRGB です。
原始フィルター要素 feDisplacementMap において、color-interpolation-filters 属性を指定していますが、それが機能しているかどうかはよくわかりません。ただし、属性によってズレる量は異なっています。
記述例
<svg viewbox="0 0 100 100" width="100" height="100"> <defs> <filter id="filter1" filterUnits="userSpaceOnUse" x="0" y="0" width="74" height="74"> <feFlood flood-color="#D00" x="10" y="5" width="45" height="50" result="img1"/> <feDisplacementMap in="SourceGraphic" in2="img1" xChannelSelector="R" yChannelSelector="A" scale="40" color-interpolation-filters="sRGB" x="0" y="0" width="74" height="74"/> </filter> <filter id="filter2" filterUnits="userSpaceOnUse" x="0" y="0" width="74" height="74"> <feFlood flood-color="#D00" x="10" y="5" width="45" height="50" result="img2"/> <feDisplacementMap in="SourceGraphic" in2="img2" xChannelSelector="R" yChannelSelector="A" scale="40" color-interpolation-filters="linearRGB" x="0" y="0" width="74" height="74"/> </filter> </defs> <image href="bear.png" filter="url(#filter1)" width="74" height="74"/> <!-- color-interpolation-filters = sRGB --> <image href="bear.png" filter="url(#filter2)" width="74" height="74"/> <!-- color-interpolation-filters = linearRGB --> </svg>
表示例
| sRGB | linearRGB |
（４）フィルターを施した結果（result）
原始フィルターでフィルターを施した結果を result 属性に設定した名称で保持します。この名称を他の原始フィルターの in に設定することで新たな画像効果を生成することができます。
なお、result 属性を記述しなくても次の原始フィルターの入力になります（その場合は in 属性も必要ありません）。
記述例
<svg viewbox="0 0 74 74" width="74" height="74"> <defs> <filter id="filter"> <feColorMatrix result="gray"/> <!-- グレイスケール --> <feGaussianBlur stdDeviation="1" result="blur"/> <!-- ぼかし --> <feConvolveMatrix in="gray"/> <!-- 輪郭抽出（result を記述しなくても次の原始フィルターの入力になる） --> <feColorMatrix result="edge"/> <!-- 輪郭を黒の不透明度に変換 --> <feFlood flood-color="lightgrey" result="bg"/> <!-- 背景色 --> <feMerge> <!-- 背景色→ぼかし→輪郭の順に重ねる --> <feMergeNode in="bg"/> <feMergeNode in="blur"/> <feMergeNode in="edge"/> </feMerge> <feColorMatrix type="saturate" values="0" result="noise"/> <!-- ノイズを生成 --> </filter> </defs> <image href="bear.png" filter="url(#filter)" width="74" height="74"/> </svg>
表示例
１３．１１．４ 基本フィルター
原始フィルター要素の中でも比較的単純に用いることができる基本フィルターの種類を示します。ただし、ブラウザにより対応状況や効果の程度等が異なることもあるので、見た目の確認が必要です。
（１）画像のブレンド（feBlend）
画像を合成します。
feBlend 要素
画像を合成する。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| in2 | 入力画像 | 合成したい画像（規定値：直前の処理結果） | × |
| mode | 合成法 | × | |
| normal | （通常） 下の色にかかわらず上の色になる（規定値） | ||
| multiply | （乗算） 下の色と上の色を掛け合わせた結果になる | ||
| screen | （スクリーン合成） 色を反転して乗算を行い、さらに色を反転した結果になる | ||
| overlay | （オーバーレイ合成） 下の色が暗ければ multiply、下の色が明るければ screen の結果になる | ||
| darken | （比較暗） 色成分ごとに最も暗い値が最終的な結果になる | ||
| lighten | （比較明） 色成分ごとに最も明るい値が最終的な結果になる | ||
| color-dodge | （覆い焼き） 下の色を、反転した上の色で除算した結果になる | ||
| color-burn | （焼きこみ） 反転した下の色を上の色で除算して、さらに反転した結果になる | ||
| hard-light | （ハードライト） 上の色が暗い色であれば multiply 、明るい色であれば screen の結果になる | ||
| soft-light | （ソフトライト） 最終的な色は hard-light に似ているが、よりソフトになる | ||
| difference | （差の絶対値） 2つの色のうち明るい色から、暗い色を減算した結果が最終的な結果になる | ||
| exclusion | （除外） 最終的な色は difference に似ているが、コントラストが低くなる | ||
| hue | （色相） 最終的な色は上の色の色調を持つが、彩度および明度は下の色の値を使用する | ||
| saturation | （彩度） 最終的な色は上の色の彩度を持つが、色調および明度は下の色の値を使用する | ||
| color | （カラー） 最終的な色は上の色の色調および彩度を持つが、明度は下の色の値を使用する | ||
| luminosity | （輝度） 最終的な色は上の色の明度を持つが、色調および 彩度は下の色の値を使用する | ||
mode の名前は別途表示しています。
記述例
<svg viewbox="0 0 800 200" width="800" height="200"> <defs> <filter id="filter1"> <feImage href="bear.png" x="10" y="10" width="74" height="74"/> <feBlend in2="SourceGraphic" mode="normal"/> </filter> <filter id="filter2"> <feImage href="bear.png" x="110" y="10" width="74" height="74"/> <feBlend in2="SourceGraphic" mode="multiply"/> </filter> <!-- 途中略 --> </defs> <circle cx="30" cy="30" r="30" fill="darkorange" filter="url(#filter1)"/></circle> <circle cx="130" cy="30" r="30" fill="darkorange" filter="url(#filter2)"/></circle> <!-- 途中略 --> </svg>
表示例
（２）色の行列変換（feColorMatrix）
三原色＋不透明度の4要素を5×4行列によって変換する。色味を交換したり、色を透明度に変換したりします。
feColorMatrix 要素
三原色＋不透明度の4要素を5×4行列によって変換する。色味を交換したり、色を不透明度に変換したりする。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| type | 合成法 （r' g' b' a' 変換後の三原色＋不透明度） | ○ | |
| matrix | 行列演算 r' = a00*r + a01*g + a02*b + a03*a + a04 g' = a10*r + a11*g + a12*b + a13*a + a14 b' = a20*r + a21*g + a22*b + a23*a + a24 a' = a30*r + a31*g + a32*b + a33*a + a34 | ||
| saturate | 彩度変換 （s は values の値） r' = (0.213+0.787*s)*r + (0.715-0.715*s)*g + (0.072-0.072*s)*b g' = (0.213-0.213*s)*r + (0.715-0.285*s)*g + (0.072-0.072*s)*b b' = (0.213+0.213*s)*r + (0.715-0.715*s)*g + (0.072-0.928*s)*b | ||
| hueRotate | 色相回転 （deg は values の値）
a00 a01 a02
a10 a11 a12 a20 a21 a22
=
0.213 0.715 0.072
0.213 0.715 0.072 0.213 0.715 0.072
+ cos(deg) *
+0.787 -0.715 -0.072 -0.213 +0.285 -0.072 -0.213 -0.715 +0.928
+ sin(deg) *
-0.213 -0.715 +0.928
+0.143 +0.140 -0.283 -0.787 +0.715 +0.072 | ||
| luminanceToAlpha | 明度抽出（不透明度として取得する） a' = 0.2125*r + 0.7154*g + 0.0721*b | ||
| values | typeにより意味が異なる | × | |
| matrix | 行列値（a00,a01・・・a33,a34の順で指定する） | ||
| saturate | 割合（0～1） | ||
| hueRotate | 角度（0～360） | ||
type の種類は別途表示しています。
記述例
<svg viewbox="0 0 500 120" width="500" height="120"> <defs> <filter id="filter1"> <feColorMatrix type="matrix" values="10 0 0 0 0 0 1 0 0 0 0 0 5 0 0 0 0 0 1 0"/> </filter> <filter id="filter2"> <feColorMatrix type="saturate" values="0.5"/> </filter> <filter id="filter3"> <feColorMatrix type="hueRotate" values="135"/> </filter> <filter id="filter4"> <feColorMatrix type="luminanceToAlpha"/> </filter> </defs> <image href="bear.png" x="100" y="20" width="74" height="74" filter="url(#filter1)"/> <image href="bear.png" x="200" y="20" width="74" height="74" filter="url(#filter2)"/> <image href="bear.png" x="300" y="20" width="74" height="74" filter="url(#filter3)"/> <image href="bear.png" x="400" y="20" width="74" height="74" filter="url(#filter4)"/> </svg>
表示例
（３）色の変換（feComponentTransfer）
すべての画素に対し転写関数を実行し、減色（discrete）、ネガポジ変換（linear）、色調補正（gamma）、切り抜きなどをします。
feComponentTransfer 要素
すべての画素に対し、次のような転写関数を実行し、データの成分ごとの置換を行う。
- feFuncR － 赤色成分に対する転写関数
- feFuncG － 緑色成分に対する転写関数
- feFuncB － 青色成分に対する転写関数
- feFuncA － 不透明度に対する転写関数
減色（discrete）、ネガポジ変換（linear）、色調補正（gamma）、切り抜きなどに用いる。
feFuncR、feFuncG、feFuncB、feFuncA 要素
三原色＋透過度の4要素に対して、明度調整, コントラスト調整, 色バランス, 閾値によるふるい（ thresholding ）などの演算を行う。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| type（注） | 変換方法 | ○ | |
| identity | 恒等変換（同じ画像） | ||
| table | 折れ線 | ||
| discrete | 階段 | ||
| linear | 線形 | ||
| gamma | ガンマ補正 | ||
| tableValues | 空白やコンマで区切られた数値 | table、discrete のとき、重みの値 | △ |
| slope | 数値 | linear のとき、一次関数の傾き（規定値：1） | × |
| intercept | 数値 | linear のときに、一次関数の切片（規定値：0） | × |
| amplitude | 数値 | gamma のときに、ガンマ補正関数の増幅率（規定値：1） | × |
| exponent | 数値 | gamma のときに、ガンマ補正関数の指数（規定値：1） | × |
| offset | 数値 | gamma のときに、ガンマ補正関数のオフセット（規定値：0） | × |
（注）type
記述例
<svg viewbox="0 0 500 120" width="500" height="120"> <defs> <filter id="filter1"> <feComponentTransfer> <feFuncR type="identity"/> <feFuncG type="identity"/> <feFuncB type="identity"/> </feComponentTransfer> </filter> <filter id="filter2"> <feComponentTransfer> <feFuncR type="table" tableValues="0 1 1 2"/> <feFuncG type="table" tableValues="0 1 1 0"/> <feFuncB type="table" tableValues="2 1 1 0"/> </feComponentTransfer> </filter> <filter id="filter3"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0,0,1"/> <feFuncG type="discrete" tableValues="0,1,0"/> <feFuncB type="discrete" tableValues="1,0,0"/> </feComponentTransfer> </filter> <filter id="filter4"> <feComponentTransfer> <feFuncR type="linear" slope="0.5" intercept="0.25"/> <feFuncG type="linear" slope="0.5" intercept="0.5"/> <feFuncB type="linear" slope="0.5" intercept="0"/> </feComponentTransfer> </filter> <filter id="filter5"> <feComponentTransfer> <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/> <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/> <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/> </feComponentTransfer> </filter> </defs> <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter1)"/> <image href="bear.png" x="120" y="20" width="74" height="74" filter="url(#filter2)"/> <image href="bear.png" x="220" y="20" width="74" height="74" filter="url(#filter3)"/> <image href="bear.png" x="320" y="20" width="74" height="74" filter="url(#filter4)"/> <image href="bear.png" x="420" y="20" width="74" height="74" filter="url(#filter5)"/> </svg>
表示例
（４）Porter-Duff組成演算（feComposite）
２つの入力画像の組に対し、画像空間における画素ごとの組成演算を行います。
feComposite 要素
画素ごとの組成演算を行う。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| in2 | 入力画像 | 合成したい画像（規定値：直前の処理結果） | × |
| operator（注） | 合成方法 | ○ | |
| over | inの画像を優先 | ||
| in | inとin2の共通部分 | ||
| out | in2の部分をくり抜く | ||
| atop | in2の領域に、in2と共通な部分のinを重ねる | ||
| xor | 共通部をくり抜く | ||
| arithmetic | 2つの画像の共通部分に応じた合成演算 | ||
| k1～k4 | 数値 | operator="arithmetic" のときに、ガンマ補正関数のオフセット k1:inとin2の共通部分 k2:inのみの部分 k3:in2のみの部分 k4:in でも in2 でもない部分（規定値：0） | × |
同じ画像を入力しています。左上の画像が in、右下の画像が in2 からの入力です。
記述例
<svg viewbox="0 0 610 150" width="610" height="150"> <defs> <filter id="filter1"> <feOffset in="SourceGraphic" dx="-10" dy="-5" result="img1a"/> <feOffset in="SourceGraphic" dx="10" dy="5" result="img1b"/> <feComposite in="img1a" in2="img1b" operator="over"/> </filter> <filter id="filter2"> <feOffset in="SourceGraphic" dx="-10" dy="-5" result="img2a"/> <feOffset in="SourceGraphic" dx="10" dy="5" result="img2b"/> <feComposite in="img2a" in2="img2b" operator="in"/> </filter> <!-- 途中略 --> <filter id="filter6"> <feOffset in="SourceGraphic" dx="-10" dy="-5" result="img6a"/> <feOffset in="SourceGraphic" dx="10" dy="5" result="img6b"/> <feComposite in="img6a" in2="img6b" operator="arithmetic" k1="1" k2="0.3" k3="0.7" k4="0"/> </filter> </defs> <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter1)"/> <image href="bear.png" x="120" y="20" width="74" height="74" filter="url(#filter2)"/> <!-- 途中略 --> <image href="bear.png" x="520" y="20" width="74" height="74" filter="url(#filter6)"/> </svg>
arithmetic 以外の、色の薄い部分は理解の助けになるように別途表示しています。
表示例
（５）単色による塗りつぶし（feFlood）
フィルタ範囲を指定の色で塗りつぶします。
feFlood 要素
フィルタ範囲を指定の色で塗りつぶす。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| flood-color | 色 | 塗りつぶしの色（規定値：black） | × |
| flood-opacity | 0～1 | 塗りつぶしの不透明度（規定値：1） | × |
フィルターが図形と重なった部分だけ表示されます。
ただし、図形は上下左右に図形の 10% ずつ広げられ、120% の大きさでとられます。
記述例
<svg viewbox="0 0 650 140" width="650" height="140"> <defs> <filter id="filter1"> <feFlood flood-color="green" flood-opacity="0.8" x="30" y="30" width="120" height="40"/> </filter> </defs> <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter1)"/> <image href="bear.png" x="120" y="60" width="74" height="74" filter="url(#filter1)"/> <image href="bear.png" x="140" y="0" width="37" height="37" filter="url(#filter1)"/> </svg>
オレンジ色の矩形がフィルターの範囲です。図形の周りのグレイの実線は図形の本来の大きさ、グレイの破線は図形を 120% 広げた範囲です。
フィルターと図形の重なった部分がフィルターの色で塗りつぶされています。
説明のために、図形やグレイの実線と破線、オレンジ色の矩形を別途表示しています。
表示例
（６）ガウスぼかし（feGaussianBlur）
フィルタ範囲を、ガウス関数を用いてぼかします。
feGaussianBlur 要素
フィルタ範囲をガウスぼかしする。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| stdDeviation | 空白やコンマで区切られた数値 | X 軸方向と Y 軸方向のぼかし幅（規定値：0） １つだけの場合は X 軸方向と Y 軸方向とも同じぼかし幅 | × |
記述例
<svg viewbox="0 0 600 150" width="600" height="150"> <defs> <filter id="filter1"> <feGaussianBlur stdDeviation="0"/> </filter> <filter id="filter2"> <feGaussianBlur stdDeviation="1 4"/> </filter> <filter id="filter3"> <feGaussianBlur stdDeviation="6 2"/> </filter> <filter id="filter4"> <feGaussianBlur stdDeviation="3"/> </filter> </defs> <image href="bear.png" x="20" y="40" width="74" height="74" filter="url(#filter1)"/> <image href="bear.png" x="120" y="40" width="74" height="74" filter="url(#filter2)"/> <image href="bear.png" x="220" y="40" width="74" height="74" filter="url(#filter3)"/> <image href="bear.png" x="320" y="40" width="74" height="74" filter="url(#filter4)"/> </svg>
表示例
（７）画像の挿入（feImage）
フィルタ範囲に、外部の画像を読み込みます。
feImage 要素
フィルタ範囲に外部の画像を読み込む。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| preserveAspectRatio | 空白で区切られたキーワード | フィルタ範囲と画像サイズが異なる場合の拡縮方法（規定値：xMidYMin meet） （preserveAspectRatio 属性 を参照） | × |
記述例
<svg viewbox="0 0 400 150" width="400" height="150"> <defs> <filter id="filter1" filterUnits="userSpaceOnUse" x="0" y="30" width="74" height="74"> <feImage href="bear.png" x="0" y="30" width="74" height="74" preserveAspectRatio="xMidYMin meet"/> </filter> </defs> <circle cx="50" cy="60" r="30" fill="blue" filter="url(#filter1)"/> </svg>
feImage は機能していないようですが、よくわかりません。
表示例
（８）画像の重ね合わせ（feMerge、feMergeNode）
画像を順に重ねます。
feMerge 要素
feMergeNode 要素で指定された画像を順に重ねる。
feMergeNode 要素
画像を指定する。
記述例
<svg viewbox="0 0 100 100" width="100" height="100"> <defs> <filter id="filter"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feFlood flood-color="lightgreen" result="bg"/> <feMerge> <feMergeNode in="bg"/> <!-- 背景色 --> <feMergeNode in="offsetBlur"/> <!-- 影 --> <feMergeNode in="SourceGraphic"/> <!-- 元の画像 --> </feMerge> </filter> </defs> <image x="20" y="0" width="74" height="74" href="bear.png" filter="url(#filter)"/> </svg>
表示例
（９）画像ずらし（feOffset）
画像を現在の位置から相対的に移動します。
feOffset 要素
画像を現在の位置から相対的に移動する。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| dx | 数値 | X 方向への移動量（規定値：0） | × |
| dy | 数値 | Y 方向への移動量（規定値：0） | × |
記述例
<svg viewbox="0 0 500 140" width="500" height="140"> <defs> <filter id="filter" filterUnits="userSpaceOnUse" x="20" y="20" width="150" height="120"> <feOffset in="SourceGraphic" dx="-10" dy="-10" result="offset1"/> <feOffset in="SourceGraphic" dx="40" dy="10" result="offset2"/> <feOffset in="SourceGraphic" dx="0" dy="20" result="offset3"/> <feMerge> <feMergeNode in="offset1"/> <feMergeNode in="offset2"/> <feMergeNode in="offset3"/> </feMerge> </filter> </defs> <image x="30" y="30" width="74" height="74" href="bear.png" filter="url(#filter)"/> </svg>
表示例
（１０）画像の敷き詰め（feTile）
画像をタイル状に並べる等の用途に使用します。
feTile 要素
画像をタイル状に並べる。
記述例
<svg viewbox="0 0 300 180" width="300" height="180"> <defs> <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="250" height="160"> <image x="0" y="0" width="74" height="74" href="bear.png"/> <feTile x="0" y="0" width="250" height="160"/> </filter> </defs> <rect x="0" y="0" width="300" height="300" filter="url(#filter)"/> </svg>
表示例
１３．１１．５ 拡張フィルター
基本フィルターよりも動作が複雑なものが多く、工夫次第で様々な効果を得ることができます。
（１）行列による畳み込み（feConvolveMatrix）
入力画像内の画素を近隣の画素と組み合せて、結果の画像を生産します。 畳み込みを通せば、次に挙げるような、幅広い画像処理演算を達成できます。
- ぼかし（ blurring ）
- 輪郭検出（ edge detection ）
- 明瞭化（ sharpening ）
- 浮き彫り（ embossing ）
- 隆起（ beveling ）
feConvolveMatrix 要素
入力画像内の画素を近隣の画素と組み合せて、結果の画像を生産する。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| order | 空白やコンマで区切られた数値 | 行サイズ、列サイズ（規定値：3） １つだけの場合は行、列とも同じサイズ | × |
| targetX | 数値（0≦targetX＜列サイズ） | 処理対象画素の列内での位置（規定値：0） | × |
| targetY | 数値（0≦targetY＜行サイズ） | 処理対象画素の行内での位置（規定値：0） | × |
| edgeMode（注１） | 入力画像の端で、はみ出した領域の色 | × | |
| duplicate | inの各辺上の色を繰り返す（同色）（規定値） | ||
| wrap | 各辺上の色を対辺（反対側）からとる | ||
| none | 透明 | ||
| kernelMatrix | 空白やコンマで区切られた数値 | コンボリューションのためのカーネル行列（注２） | ○ |
| divisor | 空白やコンマで区切られた数値 | kernelMatrixで重み付けした後の分母値（規定値：kernelMatrixの総和）（注３） | × |
| bias | 0～1 | 計算結果に加えられる値（規定値：0） | × |
| preserveAlpha | true/false | 不透明度の維持（規定値：false） | × |
（注１）中央の白い枠からはみ出たところには、矢印のように色が設定される。→.svg "feConvolveMatrix")
（注２）要素数は order の行サイズ×列サイズ
（注３）kernelMatrixの総和が０のときは１に設定される。
記述例
<svg viewbox="0 0 600 120" width="600" height="120"> <defs> <filter id="filter1" filterUnits="userSpaceOnUse" x="0" y="0" width="80" height="100"> <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="0 1 0 1 1 1 0 1 0" divisor="5" bias="0" preserveAlpha="true"/> </filter> <filter id="filter2" filterUnits="userSpaceOnUse" x="80" y="0" width="80" height="100"> <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" preserveAlpha="true"/> </filter> <filter id="filter3" filterUnits="userSpaceOnUse" x="160" y="0" width="80" height="100"> <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="-1 0 1 -2 0 2 -1 0 1" divisor="1" bias="0" preserveAlpha="true"/> </filter> <filter id="filter4" filterUnits="userSpaceOnUse" x="240" y="0" width="80" height="100"> <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="0 0 0 0 1 0 0 0 -1" divisor="1" bias="0" preserveAlpha="true"/> </filter> <filter id="filter5" filterUnits="userSpaceOnUse" x="320" y="0" width="80" height="100"> <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="-1 0 1 -1 0 1 -1 0 1" divisor="1" bias="0" preserveAlpha="true"/> </filter> <filter id="filter6" filterUnits="userSpaceOnUse" x="400" y="0" width="80" height="100"> <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" divisor="1" bias="0" preserveAlpha="true"/> </filter> <filter id="filter7" filterUnits="userSpaceOnUse" x="480" y="0" width="80" height="100"> <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="-1 0 0 0 1 0 0 0 0" divisor="1" bias="0.8" preserveAlpha="true"/> </filter> </defs> <image x="0" y="20" width="74" height="74" href="bear.png" filter="url(#filter1)"/> <image x="80" y="20" width="74" height="74" href="bear.png" filter="url(#filter2)"/> <image x="160" y="20" width="74" height="74" href="bear.png" filter="url(#filter3)"/> <image x="240" y="20" width="74" height="74" href="bear.png" filter="url(#filter4)"/> <image x="320" y="20" width="74" height="74" href="bear.png" filter="url(#filter5)"/> <image x="400" y="20" width="74" height="74" href="bear.png" filter="url(#filter6)"/> <image x="480" y="20" width="74" height="74" href="bear.png" filter="url(#filter7)"/> </svg>
表示例
（２）空間変異（feDisplacementMap）
元画像を変形し様々な効果を得ます。
feDisplacementMap 要素
元画像を変形し様々な効果を得る。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| order | 空白やコンマで区切られた数値 | 行サイズ、列サイズ（規定値：3） １つだけの場合は行、列とも同じサイズ | × |
| in2 | ID | 効果を表す画像 | ○ |
| xChannelSelector | R|G|B|A | X軸方向の変換に用いる、in2の色要素（規定値：A） | × |
| yChannelSelector | R|G|B|A | Y軸方向の変換に用いる、in2の色要素（規定値：A） | × |
| scale | 数値 | ずらす幅（規定値：0） | × |
記述例
<svg viewbox="0 0 600 120" width="600" height="120"> <defs> <filter id="filter1" filterUnits="userSpaceOnUse" x="100" y="0" width="100" height="100"> <feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/> <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="R" scale="20"/> </filter> <!-- 途中略 --> <filter id="filter4" filterUnits="userSpaceOnUse" x="400" y="0" width="100" height="100"> <feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/> <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="A" yChannelSelector="A" scale="20"/> </filter> <filter id="filter11" filterUnits="userSpaceOnUse" x="100" y="0" width="100" height="100"> <feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/> <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="R" scale="10"/> </filter> <!-- 途中略 --> <filter id="filter15" filterUnits="userSpaceOnUse" x="500" y="0" width="100" height="100"> <feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/> <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="R" scale="50"/> </filter> </defs> <image x="100" y="20" width="74" height="74" href="bear.png" filter="url(#filter1)"/> <!-- 途中略 --> <image x="400" y="20" width="74" height="74" href="bear.png" filter="url(#filter4)"/> <image x="100" y="120" width="74" height="74" href="bear.png" filter="url(#filter11)"/> <!-- 途中略 --> <image x="500" y="120" width="74" height="74" href="bear.png" filter="url(#filter15)"/> </svg>
表示例
（３）画像の侵食、膨張（feMorphology）
周辺画素の明るさを元に中心の色を決定します。
feMorphology 要素
周辺画素の明るさを元に中心の色を決定する。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| operator | 処理の切り替え | × | |
| dilate | 膨張…明るい/値の大きい所が広がる | ||
| erode | 侵食…暗い/値の小さい所が広がる（規定値） | ||
| radius | 空白やコンマで区切られた数値 | X方向半径、Y方向半径（規定値：0）１つだけの場合は同じ半径 | × |
記述例
<svg viewbox="0 0 600 220" width="600" height="220"> <defs> <filter id="filter1" filterUnits="userSpaceOnUse" x="100" y="0" width="100" height="100"> <feMorphology operator="dilate" radius="1"/> </filter> <filter id="filter2" filterUnits="userSpaceOnUse" x="200" y="0" width="100" height="100"> <feMorphology operator="dilate" radius="2"/> </filter> <filter id="filter3" filterUnits="userSpaceOnUse" x="300" y="0" width="100" height="100"> <feMorphology operator="dilate" radius="3"/> </filter> <filter id="filter11" filterUnits="userSpaceOnUse" x="100" y="100" width="100" height="100"> <feMorphology operator="erode" radius="1"/> </filter> <filter id="filter12" filterUnits="userSpaceOnUse" x="200" y="200" width="100" height="100"> <feMorphology operator="erode" radius="2"/> </filter> <filter id="filter13" filterUnits="userSpaceOnUse" x="300" y="300" width="100" height="100"> <feMorphology operator="erode" radius="3"/> </filter> <filter id="filter21" filterUnits="userSpaceOnUse" x="400" y="50" width="150" height="150" filterres="200,200"> <feMorphology in="SourceAlpha" operator="dilate" radius="4"/> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"> </feMerge> </filter> </defs> <image x="100" y="20" width="74" height="74" href="bear.png" filter="url(#filter1)"/> <image x="200" y="20" width="74" height="74" href="bear.png" filter="url(#filter2)"/> <image x="300" y="20" width="74" height="74" href="bear.png" filter="url(#filter3)"/> <image x="100" y="120" width="74" height="74" href="bear.png" filter="url(#filter11)"/> <image x="200" y="120" width="74" height="74" href="bear.png" filter="url(#filter12)"/> <image x="300" y="120" width="74" height="74" href="bear.png" filter="url(#filter13)"/> <g filter="url(#filter21)"> <image x="420" y="70" width="74" height="74" href="bear.png"/> <image x="450" y="100" width="74" height="74" href="bear.png"/> </g> </svg>
表示例
（４）パーリンノイズによる描画（feTurbulence）
雲や大理石模様等の自然界にしばしば現れる紋様を擬似的に生成します。
feTurbulence 要素
パーリンノイズによる描画をする。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| baseFrequency | 空白やコンマで区切られた1より小さい値 | X方向の基底周波数、Y方向の基底周波数 （規定値：0）１つだけの場合は同じ周波数 | × |
| numOctaves | 1以上の整数 | ノイズ関数に対するオクターブ（規定値：1） | × |
| seed | 1以上の整数 | 乱数の初期数（規定値：0） | × |
| stitchTiles | 継ぎ目の処理方法 | × | |
| stitch | 継ぎ目をつなぐ | ||
| noStitch | 継ぎ目をつながない（規定値） | ||
| type | ノイズ関数か、ゆらぎ関数かの指定 | × | |
| fractalNoise | ノイズ関数 | ||
| turbulence | ゆらぎ関数（規定値） | ||
記述例
<svg viewbox="0 0 750 150" width="750" height="150"> <defs> <filter id="filter1" filterUnits="userSpaceOnUse" x="20" y="20" width="100" height="100"> <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4" seed="3" stitchTiles="noStitch"/> </filter> <filter id="filter2" filterUnits="userSpaceOnUse" x="140" y="20" width="100" height="100"> <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4" seed="3" stitchTiles="stitch"/> </filter> <filter id="filter3" filterUnits="userSpaceOnUse" x="260" y="20" width="100" height="100"> <feTurbulence type="fractalNoise" baseFrequency="0.1 0.05" numOctaves="1" seed="3" stitchTiles="noStitch"/> </filter> <filter id="filter4" filterUnits="userSpaceOnUse" x="380" y="20" width="100" height="100"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" seed="3" stitchTiles="noStitch"/> </filter> <filter id="filter5" filterUnits="userSpaceOnUse" x="500" y="20" width="100" height="100"> <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2" seed="3" stitchTiles="stitch"/> </filter> <filter id="filter6" filterUnits="userSpaceOnUse" x="620" y="20" width="100" height="100"> <feTurbulence type="turbulence" baseFrequency="0.01 0.05" numOctaves="8" seed="3" stitchTiles="noStitch"/> </filter> </defs> <rect x="20" y="20" width="80" height="80" filter="url(#filter1)"/> <rect x="140" y="20" width="80" height="80" filter="url(#filter2)"/> <rect x="260" y="20" width="80" height="80" filter="url(#filter3)"/> <rect x="380" y="20" width="80" height="80" filter="url(#filter4)"/> <rect x="500" y="20" width="80" height="80" filter="url(#filter5)"/> <rect x="620" y="20" width="80" height="80" filter="url(#filter6)"/> </svg>
表示例
.svg "feTurbulence")
（５）影を付ける（feDropShadow）
複数の原始フィルターを組み合わせることで実現していた影を簡単に生成します。
feDropShadow 要素
影を簡単に生成する。
属性（この他に、共通属性 がある）
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| dx | 数値 | 影の、元の画像との X 方向の変位（規定値：2） | × |
| dy | 数値 | 影の、元の画像との Y 方向の変位（規定値：2） | × |
| stdDeviation | 数値 | 影の広がり（規定値：2） | × |
| flood-color | 色 | 影の色（規定値：black） | × |
| flood-opacity | 0～1 | 影の不透明度（規定値：1） | × |
記述例
<svg viewbox="0 0 300 120" width="300" height="120"> <defs> <filter id="filter1"> <feDropShadow/> </filter> <filter id="filter2"> <feDropShadow dx="3" dy="3" stdDeviation="0" flood-color="blue" flood-opacity="0.5"/> </filter> </defs> <image x="100" y="20" width="74" height="74" href="bear.png" filter="url(#filter1)"/> <image x="200" y="20" width="74" height="74" href="bear.png" filter="url(#filter2)"/> </svg>
表示例
１３．１２ アニメーション
SVG でも一般的なアニメーションと同じくグラフィックを時系列的に少しずつ変化させることで実現させています。
SVG のアニメーション要素を利用し図形要素のプロパティを操作することで、モーションパス、フェードイン／フェードアウト効果、オブジェクトの増大・縮小、 回転、色の変化などを定義できます。
１３．１２．１ アニメーション (animate)
animate 要素は対象となる図形要素のプロパティ値の時系列的変化を表します。animate で変更可能な属性は、数値や色等の何らかの大きさを表すものです。連続的に変更できない場合はその変化は離散的（跳び跳び）になります。
animate 要素
一つの要素に対するアニメーションを指定する。
属性
（１） アニメーションの対象
アニメーションの対象となる図形の ID や属性の名前を指定します。
animate 要素
アニメーションの対象を指定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| attributeName | 属性名 | アニメーションの対象とする図形の属性名 | ○ |
| attributeType | アニメーションの対象とする図形の属性の種類 | ○ | |
| CSS | CSS プロパティ名 | ||
| XML | XML 属性名 | ||
| auto | CSS プロパティ名 → XML 属性名（規定値） | ||
| href | ID | アニメーションの対象とする図形の ID（規定値：animate 要素を囲む図形） | × |
attributeName 属性は、アニメーションの対象となる属性の名前を指定します。
attributeType 属性は、attributeName 属性で指定された名前が定義されている名前空間を指定します。次のどれか（大文字小文字の区別がある）を指定します。ただし、どれを指定しても違いがないように感じます。
- CSS
- アニメーション可能なスタイルシート（CSS）のプロパティ名
- XML
- アニメーション可能な XML 属性名
- auto
- CSS プロパティ名の一覧を最初に検索し、見つからない場合はその要素に対する既定の XML 名前空間を検索
また、通常アニメーションさせたい図形要素の中に animate 要素を記述しますが、別のところに記述した図形をアニメーションさせたい場合は href 属性を使用して、その要素の ID を指定します。
記述例
<svg viewbox="0 0 400 180" width="400" height="180"> <circle cx="100" cy="80" fill="red" stroke="orange" stroke-width="1"> <animate attributeType="XML" attributeName="r" begin="0" dur="5" from="0" to="80" repeatCount="indefinite"/> <animate attributeType="CSS" attributeName="fill-opacity" begin="0" dur="5" from="1" to="0" repeatCount="indefinite"/> </circle> <rect id="a" x="300" y="10" width="100" height="100" fill="blue"/> <animate href="#a" attributeType="XML" attributeName="rx" begin="0" dur="5" from="0" to="50" repeatCount="indefinite"/> <animate href="#a" attributeType="XML" attributeName="ry" begin="0" dur="5" from="0" to="50" repeatCount="indefinite"/> </svg>
左は circle 要素の中に animate 要素を記述していますが、右は別の場所（この例では直後）にある animate 要素で アニメーションさせたい要素の ID を指定しています。
表示例
a.svg "animate")
（２） アニメーションの属性値の変化
属性の初期値、終了値、増減値あるいは取りうる値を指定します。
animate 要素
属性の初期値、終了値、増減値あるいは取りうる値を指定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| from | 属性値 | 初期値 | values とどちらか |
| to | 属性値 | 終了値 | |
| by | 数値 | 増減値 | |
| values | セミコロン区切りの値リスト | dur や keyTimes のタイミングでの値の変化。この値は from、to、by に優先する。 | from、to、by とどちらか |
| calcMode | 値の変化の関数 | × | |
| discrete | 離散変化（次の値に一気に変化する） | ||
| linear | 線形変化（次の値に一定割合で変化する）（規定値） | ||
| paced | 定速（dur 属性値の時間をかけて from 値から to 値に変化する） | ||
| spline | 3次ベジェスプライン曲線による変化（values，keyTimes，keySplinesと一緒に用いる） | ||
| keyTimes | セミコロン区切りの値リスト | 変化が起こるタイミングのリスト linear、splineの場合は 0～1、discreteの場合は 0～ | ×（spline のとき○） |
| keySplines | セミコロン区切りの(x1 y1 x2 y2)リスト | keyTimes のタイミングでの（3次ベジェスプライン曲線）値の変化。0～1.0の割合で指定 | ×（spline のとき○） |
a.svg "animate")
b.svg "animate")
from、to は初期値と終了値を指定します。数値あるいは色の名前を指定することができます。
by を指定した場合は (from+by) が終了値となります。to と by の両方を指定した場合は to が優先されます。
values は変化させる値のリストを与えます。リストに指定された値を順次とります。
記述例
<svg viewbox="0 0 400 100" width="400" height="100"> <circle cy="20" r="10" fill="green"> <animate attributeName="cx" dur="5" from="20" to="100" repeatCount="indefinite"/> </circle> <circle cy="50" r="10" fill="green"> <animate attributeName="cx" dur="5" from="20" by="80" repeatCount="indefinite"/> </circle> <circle cy="80" r="10" fill="green"> <animate attributeName="cx" dur="5" values="10;30;80;60;100" repeatCount="indefinite"/> </circle> <circle cx="200" cy="50" r="40"> <animate attributeName="fill" dur="5" from="blue" to="red" repeatCount="indefinite"/> </circle> </svg>
左は円の中心の X 座標を from～to、from～by、values で変化させています。右は from～to で色を変化させています。
表示例
c.svg "animate")
calcMode 属性は値の変化のさせ方を指定します。
- discrete
- 次の値に一気に変化する
- linear
- 次の値に徐々に変化する（values を指定でき変化を変えられる）
- paced
- 最終値に一定割合で徐々に変化する（to や by を指定し最後まで一定に変化する）
- spline
- 3次ベジェ曲線で変化する（keyTimes，keySplines を指定する）
記述例
<svg viewbox="0 0 500 130" width="500" height="130"> <line x1="20" y1="110" x2="20" stroke="blue" stroke-width="20"> <animate calcMode="discrete" attributeName="y2" begin="0" dur="5" values="80;30;60;10" keyTimes="0;0.3;0.5;0.9" repeatCount="indefinite"/> </line> <line x1="130" y1="110" x2="130" stroke="blue" stroke-width="20"> <animate calcMode="linear" attributeName="y2" begin="0" dur="5" values="110;40;70;10" keyTimes="0;0.2;0.6;1" repeatCount="indefinite"/> </line> <line x1="240" y1="110" x2="240" stroke="blue" stroke-width="20"> <animate calcMode="paced" attributeName="y2" begin="0" dur="5" from="110" to="10" repeatCount="indefinite"/> </line> <line x1="350" y1="110" x2="350" stroke="blue" stroke-width="20"> <animate calcMode="spline" attributeName="y2" begin="0" dur="5" values="110;60;10" keyTimes="0;0.5;1" keySplines="0.5 0 1 0.5;0 0.5 0.5 1" repeatCount="indefinite"/> </line> </svg>
青い線の y2 座標をそれぞれの方法で変化させています。なお、グレイの点線などは理解の助けになるように別途描いています。
表示例
d.svg "animate")
（３） アニメーションのタイミング
animate 要素
タイミングを指定する。
属性
|
時間の記述形式
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
（注）ID.begin±時間 や ID.end±時間 などの形式で、他の要素の開始時刻や終了時刻を基準としたタイミングを指定できる
記述例
<svg viewbox="0 0 500 130" width="500" height="130"> <circle cx="10" cy="10" r="green"> <animate attributeName="cx" from="10" to="110" begin="0" dur="10" repeatCount="indefinite"/> </circle> <circle cx="10" cy="40" r="green"> <animate attributeName="cx" from="10" to="110" dur="10" end="4" repeatCount="indefinite"/> </circle> <circle cx="10" cy="70" r="green"> <animate attributeName="cx" from="10" to="110" begin="0" dur="10" end="10" max="5" repeatCount="indefinite"/> </circle> <circle cx="10" cy="100" r="green"> <animate attributeName="cx" from="10" to="110" begin="0" dur="10" end="4" min="6" repeatCount="indefinite"/> </circle> </svg>
一番上は無限に繰り返します。二番目は end 属性が指定してあるので指定された時間後に止まります。三番目は max 属性に小さな値が指定してあるので end 属性で指定した時間より前に止まります。一番下は min 属性に大きな値が指定してあるので end 属性で指定した時間より後に止まります。
表示例
[再実行]されなければ、
a.svg "animate")
repeatCount 属性は繰り返しの回数を指定します。repeatDur 属性は繰り返しの時間を指定します。単位を省略すると秒になります。また、repeatCount も repeatDur も指定しなければ繰り返しは行われず１回だけの実行になります。
記述例
<svg viewbox="0 0 500 70" width="500" height="70"> <circle cx="10" cy="10" r="10" fill="green"> <animate attributeName="cx" from="10" to="110" begin="0" dur="5" repeatCount="2"/> </circle> <circle cx="10" cy="40" r="10" fill="green"> <animate attributeName="cx" from="10" to="110" begin="0" dur="7" repeatDur="10"/> </circle> </svg>
次の例では、上は２回繰り返して終わります。二番目は１０秒間で終わります。結果的には２つとも同時に終わります。
表示例
b.svg "animate")
再実行
[再実行]されなければ、
begin 属性に他の要素の ID.end を指定することによって、開始のタイミングを他の要素の終了に合わせることができます。
記述例
<svg viewbox="0 0 400 120" width="400" height="120"> <rect id="r" x="20" y="10" width="100" height="100" fill="blue"/> <animate id="r1" href="#r" attributeName="rx" begin="0;r3.end" dur="5" from="0" to="50"/> <animate id="r2" href="#r" attributeName="ry" begin="0;r4.end" dur="5" from="0" to="50"/> <animate id="r3" href="#r" attributeName="rx" begin="r1.end" dur="5" from="50" to="0"/> <animate id="r4" href="#r" attributeName="ry" begin="r2.end" dur="5" from="50" to="0"/> </svg>
次の例では、ID が r1 と r3 はそれぞれ互いの終了直後に開始されます。ID が r2 と r4 でも同様です。
結果的に、rx と ry を 0 ～ 50 ～ 0 というように繰り返します。
表示例
c.svg "animate")
（４） アニメーション設定値の扱い
fill 属性ではアニメーション終了時の状態を制御することができます。
animate 要素
アニメーション終了時の状態や属性値の取扱いを設定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| fill | アニメーション終了時に効果を初期値に戻すかどうか | × | |
| freeze | 戻さない | ||
| remove | 戻す（規定値） | ||
| additive | animate で設定する値の算出法を設定する | × | |
| sum | 差分値として加算する | ||
| replace | 絶対値として設定する（規定値） | ||
| accumulate | リピートした際に値を蓄積するかどうかを設定する | × | |
| sum | 前回の結果に足しこんでいく（累積） | ||
| none | リピートする都度値をリセットする（規定値） | ||
fill 属性ではアニメーション終了時の状態を制御することができます。
記述例
<svg viewbox="0 0 500 110" width="500" height="110"> <circle cx="50" cy="50" r="10" fill="green"> <animate attributeName="r" from="0" to="50" begin="0" dur="5" fill="freeze"/> </circle> <circle cx="170" cy="50" r="10" fill="green"> <animate attributeName="r" from="0" to="50" begin="0" dur="5" fill="remove"/> </circle> </svg>
左は終了状態のままですが、右は初期状態に戻ります。
表示例
a.svg "animate")
再実行
[再実行]されなければ、
additive 属性では animate で設定する値の算出法を設定します。
記述例
<svg viewbox="0 0 500 70" width="500" height="70"> <circle cx="80" cy="20" r="10" fill="green"> <animate attributeName="cx" from="0" to="-60" begin="0" dur="5" repeatCount="indefinite"/> <animate attributeName="cx" from="80" to="140" begin="0" dur="5" repeatCount="indefinite" additive="sum"/> </circle> <circle cx="80" cy="50" r="10" fill="green"> <animate attributeName="cx" from="0" to="-60" begin="0" dur="5" repeatCount="indefinite"/> <animate attributeName="cx" from="80" to="140" begin="0" dur="5" repeatCount="indefinite" additive="replace"/> </circle> </svg>
上は from 同士（0+80） to 同士（-60+140）の値が加算され新しい属性値となります。結果的に from も to も 属性値が 80 となり移動しません。下は後から指定された属性値が前に指定されていた値を置き換えるので 80～140 の間を移動することになります。
表示例
b.svg "animate")
accumulate 属性では リピートした際に値を蓄積するかどうかを設定します。
記述例
<svg viewbox="0 0 500 70" width="500" height="70"> <circle cx="50" cy="30" r="10" fill="blue"> <animate attributeName="r" from="0" to="10" begin="0" dur="3" repeatCount="3" accumulate="sum"/> </circle> <circle cx="170" cy="30" r="10" fill="blue"> <animate attributeName="r" from="0" to="10" begin="0" dur="3" repeatCount="3" accumulate="none"/> </circle> </svg>
左は、2回目の繰り返しでの r の値が、1回目の繰り返し後に 10 になった値に加算されるので、10～20 の範囲で変化することになります。右は加算されませんので、0～10 の範囲で変化することになります。
表示例
c.svg "animate")
再実行
[再実行]されなければ、
１３．１２．２ 設定 (set)
set 要素は、指定された持続時間だけ属性に値を設定します。
set 要素
属性に値を設定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| attributeName | 属性名 | 変更する属性名 | ○ |
| to | 属性値 | attributeName で指定した属性に設定する値 | × |
その他、animate 要素の属性も指定できる。
記述例
<svg viewbox="0 0 100 50" width="100" height="50"> <circle cx="10" cy="20" r="10" fill="red"> <animate id="c" attributeName="cx" dur="10;90;10" begin="0;c.end" repeatCount="3"/> <set attributeName="fill" begin="c.begin" to="red"/> <set attributeName="fill" begin="c.repeat(1)" to="blue"/> <set attributeName="fill" begin="c.repeat(2)" to="green"/> </circle> </svg>
下の例は３回繰り返しますが、begin 属性で、その終了が次の開始のタイミングに設定されていますので、永久に繰り返します。
ただし、set 要素で最初は「赤」、１回目の繰り返しは「青」、２回目の繰り返しは「緑」に設定しています。
表示例
また、attributeName 属性では、スタイルシートの属性名も指定できます。
記述例
<svg viewbox="0 0 100 50" width="100" height="50"> <circle cx="10" cy="20" r="10" fill="red" style="visibility:hidden;"> <animate id="c" attributeName="cx" dur="2" begin="0;c.end"/> <set attributeName="visibility" begin="c.begin" to="visible"/> <set attributeName="visibility" begin="c.begin+1" to="hidden"/> </circle> </svg>
下の例は１秒ごとに表示と非表示を繰り返します。visibility を visible にすると表示、hidden にすると非表示になります。
表示例
は、SVG のアニメーションを img タグで指定したとき、表示されないことがあるようです。他の例は問題ないようですが、なぜかこの例だけ表示されません。（表示例の下あたりで右ボタン）「新しいタブで画像を開く(I)」を選び別タブで表示させると問題なく表示されます。
１３．１２．３ モーションパス (animateMotion)
animateMotion 要素を用いると図形を任意の曲線に沿って移動させることができます。
animateMotion 要素
図形を任意の曲線に沿って移動させる。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| path | path 要素のd属性と同じ | モーションパス | mpath 要素とどちらか |
| keyPoints | 0～1 | 曲線全体の長さにおける位置 | |
| rotate | 図形の回転角（規定値：0） | × | |
| auto | 自動 | ||
| auto-reverse | 自動(逆) | ||
| 角度 | 回転角 | ||
animate 要素と同じ属性も記述できる
mpath 要素
モーションパスを指定する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| href | ID | モーションパスを指定した path 要素の ID | ○ |
path 属性や mpath 要素で移動するパスを指定します。
記述例
<svg viewbox="0 0 400 110" width="400" height="110"> <circle cx="10" cy="50" r="10" fill="green"> <animateMotion id="m1" dur="1" path="M0,0 Q 30,-80 60,0" begin="0;m1.end" repeatCount="5" accumulate="sum"/> </circle> <defs> <path id="m2" d="m0,0 q 30,-80 60,0"/> </defs> <circle cx="10" cy="100" r="10" fill="green"> <animateMotion id="m3" dur="1" begin="0;m3.end" repeatCount="5" accumulate="sum"/> <mpath href="#m2"/> </animateMotion> </circle> </svg>
上は path で指定した２次ベジェスプライン曲線にそって移動します。５回繰り返していますが、繰り返しごとに値を蓄積していきます。下は mpath 要素で同様な定義をしていますが、この場合の path 要素では相対位置を指定する必要があるようです。
表示例
rotate 属性で図形の回転角を指定します。
記述例
<svg viewbox="0 0 400 200" width="400" height="200"> <path d="M -10,-5 L 10,0 -10,5 Z" fill="green"> <animateMotion rotate="auto" dur="6" repeatCount="indefinite" path="M 60,40 c 0,-80 240,80 240,0 s -240,80 -240,0"/> </path> <path d="M -10,-5 L 10,0 -10,5 Z" fill="green"> <animateMotion rotate="auto-reverse" dur="6" repeatCount="indefinite" path="M 60,100 c 0,-80 240,80 240,0 s -240,80 -240,0"/> </path> <path d="M -10,-5 L 10,0 -10,5 Z" fill="green"> <animateMotion rotate="45" dur="6" repeatCount="indefinite" path="M 60,160 c 0,-80 240,80 240,0 s -240,80 -240,0"/> </path> </svg>
１番上は図形が自動的に進行方向に向きます。２番目は進行方向と反対向きになります。３番目は４５度の角度を指定していますが機能していないようです。
なお、グレイの点線は理解の助けになるように別途描いています。
表示例
１３．１２．４ 変形アニメーション (animateTransform)
animateTransform 要素では図形の変形アニメーションを定義します。
animateTransform 要素
図形の変形アニメーションを定義する。
属性
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| attributeName | transform | アニメーションの対象とする図形の属性名 | ○ |
| type | 変形の種類 | rotate、translate、skewX、skewY、scale（１３．２．４ 変形 (transform) 参照） | ○ |
animate 要素と同じ属性も記述できる
ただし、from、to、values 属性などの記述は type 属性によって変わる
記述例
<svg viewbox="0 0 600 150" width="600" height="150"> <rect x="50" y="10" width="50" height="50" rx="10" ry="10" fill="orange"> <animateTransform attributeName="transform" type="rotate" from="0 75,35" to="360 75,35" dur="6" repeatCount="indefinite"/> </rect> <circle cx="40" cy="100" r="10" fill="green"> <animateTransform attributeName="transform" type="translate" dur="3" values="40,10; 100,10; 40,10" repeatCount="indefinite"/> </circle> <g transform="translate(200,20)"> <rect x="0" y="0" width="40" height="40" rx="10" ry="10" fill="blue"> <animateTransform attributeName="transform" type="skewX" dur="6" values="45; -45; 45" repeatCount="indefinite"/> </rect> </g> <g transform="translate(300,50)"> <rect x="0" y="0" width="40" height="40" rx="10" ry="10" fill="blue"> <animateTransform attributeName="transform" type="skewY" dur="6" values="45; -45; 45" repeatCount="indefinite"/> </rect> </g> <g transform="translate(420,10)"> <circle cx="0" cy="35" r="25" fill="red"> <animateTransform attributeName="transform" type="scale" dur="6" values="1 2; 2 1; 1 2" repeatCount="indefinite"/> </circle> </g> </svg>
表示例
