SVGについて – 塗りについて – propansystem[プロパンシステム]

SVGについて – 塗りについて

図形を着色する

stroke属性が図形を囲む線の着色、fill属性が図形内部の着色です。

[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test1.html)

実行結果

stroke属性の値は
[js]
色名
RGB値
16進数
RGBA値
[/js]
の表記方法になります。

透明度を決定する

図形を囲む線の透明度はstroke-opacity属性、
図形の透明度はfill-opacity属性でそれぞれ決定します。

[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test2.html)

実行結果

ストローク(線の種類)を決定する

ストロークの属性(stroke-linecap)を指定すると、ストロークの端の描画方法を制御できます。
属性の値と効果は以下になります。

[js]
stroke-width 幅
stroke-linecap 形状
butt ストローク方向に垂直な直線
square ストロークの終端をstroke-widthの半分の値で描画(垂直)
round ストロークの終端を丸める(非垂直に描画)
[/js]

サンプル
[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div>例2 (square)</div>
<svg width="200" height="200" viewBox="0 0 200 200">
<path
d = "M 30 30
A 30 30 0 0 1 110 110"
stroke = "#4f4f4f"
stroke-width = "15"
stroke-linecap = "square"
stroke-opacity = "0.3"
fill = "#cccccc"
fill-opacity = "0.3"
/>
</svg>

<div>例3 (round)</div>
<svg width="200" height="200" viewBox="0 0 200 200">
<path
d = "M 30 30
A 30 30 0 0 1 110 110"
stroke = "#4f4f4f"
stroke-width = "15"
stroke-linecap = "round"
stroke-opacity = "0.3"
fill = "#cccccc"
fill-opacity = "0.3"
/>
</svg>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test3.html)

実行結果

例1 (butt)

例2 (square)

例3 (round)

ストローク(線の種類)を決定する (破線)

ストロークの線種(stroke-dasharray)を制御できます。

値は「カンマ区切りで複数の数値」で指定できます。
下記の例では、「stroke-dasharray = “15, 5″」としており、
動作例を見てみると、実線で15ピクセル描画した後、5ピクセルの空白、その次にまた実線で15ピクセル、空白で5ピクセルという順で線が描画されています。

[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

</body>
</html>
[/js]

実行結果

サーバ上のHTMLはこちら(test4.html)

stroke-dasharrayの値をカンマ区切りで複数の数値を記載したパターンを試します。
下記のサンプルを用意しました。

[js]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test5.html)

画面にアクセスすると下記のような表示になります。

実行結果

この破線の描画ルールは、「15, 5, 30」の各ピクセルごとに、実線 → 空白 → 実線という幅で破線が描画されています。
また、始点から終点まで上記のルールを繰り返して描画します。

各、実線と空白、そして幅のルールがわかりやすいように数値と色をつけたものが下記の図です。

最初、赤文字で「15, 5, 30」の間隔で破線(実線 → 空白 → 実線)を描画し、
次に、青文字で「15, 5, 30」の間隔で破線(空白 → 実線 → 空白)を描画しています。

その次に、また赤文字の「15, 5, 30」の間隔で描画がされ、その後、青文字での描画 → 赤文字での描画・・・と線分が終わるまで繰り返されます。

(注：図形のサイズは、数値をわかりやすくする為に拡大しています)