- 2008年7月 9日 16:30
- Fill & Stroke
Fill プロパティ& Stroke プロパティの値を指定して描写するインテリア色とストローク色を設定します。下にサンプル(SVGファイル)と各プロパティ値のテーブル表を作りました。
色の名称はこちらを参考：Name, Hex, RGB of Color
上の左にある円は、Circleの r 属性(半径)のみに値を設定した場合に描かれる円です。X軸Y軸の位置もFill,Strokeの色等が指定されていませんので、指定されていない値は初期値で描かれてます。下のようなコードを書いても同じような黒い円なります。
四角い図形は、<rect>要素の各属性やスタイル属性を指定して描いたものです。x軸、y軸、幅、高さ、fillの色、strokeの色、strokeの幅等に値を設定して描きます。stroke-dasharray は"25 25" と指定されてますので、25px 間隔で 25px の長さのストロークが描かれます。もしこれを、stroke-dasharray="25 25 5 5" と指定すれば、 25px 間隔で 25px の長さのストロークの次に5px 間隔で 5px の長さのストロークが描かれます。これを利用してストロークのラインだけ(line要素)で、バーコードを描くことも出来ます。stroke-dashoffset でストロークの始まりの位置が指定されます。この場合、-12.5px 後にずらした位置から描かれます。stroke-linecap は、図のように、round、butt、square の３種類のラインの両端の形が設定出来ます。また、基本単位はpx ですが、他にも、em、ex、pt、pc、cm、mmなどの単位も使うことが出来ます。
インテリア色を白にしたい場合は、fill="#fff"、fill="#ffffff"、fill="white"、fill="rgb(100%,100%.100%)"、fill="rgb(255,255,255)" と書くことも出来ます。色の名称は、W3Cで指定されているものは使えます。
色の名称はこちらを参考：Name, Hex, RGB of Color
| プロパティ | プロパティ値の説明 | 値の指定 | スタイル属性を使った指定 | 初期値 | アニメーション |
|---|---|---|---|---|---|
| Fill | インテリアの色を設定 | fill="white" fill="#ffffff" fill="rgb(255,255,255)" fill="rgb(100%,100%,100%)" | style="fill:white" | Black | 可(Yes) |
| Fill-opacity | インテリアの色の透明度を設定 0 ～ 1の範囲 | fill-opacity="0.5" | style="fill-opacity:0.5" | 1 | 可(Yes) |
| Fill-rule | 図形の内側-外側を交差する線によって設定 nonzero evenodd inherit | fill-rule="nonzero" | style="fill-rule:nonzero" | nonzero | 可(Yes) |
| プロパティ | プロパティ値の説明 | 値の指定 | スタイル属性を使った指定 | 初期値 | アニメーション |
|---|---|---|---|---|---|
| stroke | ストロークの色 | stroke="#000" | style="stroke:black" | なし(none) | 可(Yes) |
| stroke-width | ストロークの幅 | stroke-width="5" | style="stroke-width:5" | 1 | 可(Yes) |
| stroke-opacity | ストロークの透明度 0～1の範囲 | stroke-opacity="0.5" | style="stroke-opacity:0.5" | 1 | 可(Yes) |
| stroke-linecap | ストロークの端の形 butt round square inherit | stroke-linecap="butt" | style="stroke-linecap:butt" | butt | 可(Yes) |
| stroke-linejoin | ストロークの角の形 miter round bevel inherit | stroke-linejoin="miter" | style="stroke-linejoin:miter" | miter | 可(Yes) |
| stroke-dasharray | ストロークのダッシュのパターン設定 none inherit | stroke-dasharray="1 10" | style="stroke-dasharray:1 10" | なし(none) | 可(Yes) |
| stroke-dashoffset | ストロークのダッシュのオフセット設定 inherit | stroke-dashoffset="-5" | style="stroke-dashoffset:-5" | 0 | 可(Yes) |
| stroke-miterlimit | ストロークの角の限界比率 | stroke-miterlimit="1" | style="stroke-miterlimit:1" | 可(Yes) |
下のコードは、上のSVGファイルのコードです。<g> のGroup要素や、Transformを使用したコーディーネートシステムを利用しています。それらの要素は大変重要な位置付けがされています。後の記事で具体的な説明を加えていきます。
- Newer: Chapter 3 : Line element SVG
- Older: Chapter 1 : About SVG
