SVGタグを利用して直線のパスを描画する
SVGタグを利用して直線のパスを描画するコードを紹介します。
概要
SVGタグを利用してSVG画像を表示する領域で直線のパスを描画する場合は、path タグを利用します。
書式
<path d="(コマンド)" fill="(塗りつぶし色)">
<path d="(コマンド)" fill="(塗りつぶし色) stroke="(線の色)">
<path d="(コマンド)" style="(スタイル指定)">
コマンドの書式
d属性で指定するコマンドの書式は下記です。
(コマンド名1)(値1-1) (値1-2) (コマンド名2)(値2-1) (値2-2) (コマンド名n)(値n-1) (値n-2)
コマンド
d属性で指定するコマンドは下記です。
| コマンド名 | 書式 | 意味 |
|---|
| M | M (x座標) (y座標) | 指定した座標にペンを移動します |
| m | m (dx) (dy) | 現在のペンの位置から、dx、dyの値を加えた座標にペンを移動します。
|
| L | L (x座標) (y座標) | 指定した座標までペンで線を描画します |
| l | l (dx) (dy) | 現在のペンの位置から、dx、dyの値を加えた座標までペンで線を描画します |
| H | H (x座標) | 指定したx座標までペンで線を描画します |
| h | h (dx) | 現在のペンの位置から、dxの値を加えたx座標までペンで線を描画します |
| V | V (y座標) | 指定したy座標までペンで線を描画します |
| v | v (dy) | 現在のペンの位置から、dyの値を加えたy座標までペンで線を描画します |
| Z | Z | 始点に向かってパスを閉じます |
実装例1
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
body {
background-color: #E0E0E0;
}
.SvgFrame {
background-color:#FFFFFF;
border: solid 1px #404040;
}
-->
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
<path d="M 20 20 L 320 20" stroke="#202020"/>
</svg>
</body>
</html>
解説
下記がapthタグです。
<path d="M 20 20 L 320 20" stroke="#202020"/>
コマンドと動作は下記です。今回の例では、(x,y)=(20,20)から (x,y)=(320,20)までの直線を描画する動作になります。線の色は stroke属性で指定した、#202020 になります。
| コマンド | 値1 | 値2 | 動作 |
|---|
| M | 20 | 20 | (x,y)=(20,20)にペンを移動します |
| L | 320 | 20 | (x,y)=(320,20)まで線を描画します |
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。直線が描画できていることが確認できます。
実装例2
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
body {
background-color: #E0E0E0;
}
.SvgFrame {
background-color:#FFFFFF;
border: solid 1px #404040;
}
-->
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
<path d="M 20 20 H 320 V 120 Z" stroke="#2a579a" fill="#cfddf1" />
</svg>
</body>
</html>
解説
下記がapthタグです。
<path d="M 20 20 H 320 V 120 Z" stroke="#2a579a" fill="#cfddf1" />
コマンドと動作は下記です。今回の例では、(x,y)=(20,20)から (x,y)=(320,20)までの直線を描画する動作になります。線の色は stroke属性で指定した、#2a579a に塗りつぶしの色はfill属性で指定した#cfddf1 になります。
| コマンド | 値1 | 値2 | 動作 |
|---|
| M | 20 | 20 | (x,y)=(20,20)にペンを移動します |
| H | 320 | | (x,y)=(320,20)まで線を描画します |
| V | | 120 | (x,y)=(320,120)まで線を描画します |
| Z | | | パスを閉じます |
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。閉じられたパスが描画され、内部が市営したカラーで塗りつぶされていることが確認できます。
補足:styleで指定する場合
SVGの描画色などをstyleタグで指定することもできます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
body {
background-color: #E0E0E0;
}
.SvgFrame {
background-color:#FFFFFF;
border: solid 1px #404040;
}
-->
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
<path d="M 20 20 H 320 V 120 Z" style="stroke:#2a579a;fill:#cfddf1;stroke-width:2px;" />
</svg>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
body {
background-color: #E0E0E0;
}
.SvgFrame {
background-color:#FFFFFF;
border: solid 1px #404040;
}
.Figure1{
stroke:#2a579a;
fill:#cfddf1;
stroke-width:2px;
}
-->
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
<path d="M 20 20 H 320 V 120 Z" class="Figure1" />
</svg>
</body>
</html>
表示結果
style属性やclassでも図形の色や線の色を指定できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
