SVGタグを利用して線を描画する
SVGタグを利用して線を描画するコードを紹介します。
概要
SVGタグを利用して線を描画するにはlineタグを利用します。
プログラム例
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
body{
background-color:#E0E0E0;
}
.SvgFrame{
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">
<line x1="20" y1="10" x2="600" y2="280" style="stroke:rgb(0,0,128);stroke-width:1" />
</svg>
</body>
</html>
解説
下記がlineタグのコードになります。x1 y1 属性に線の端点の座標を指定し、x2 y2 属性にもう一端の線の座標を指定します。2点をつなぐ線を描画します。描画する線の太さはstyle属性の stroke-width プロパティで指定します。また、線のカラーはstrokeプロパティで指定します。
<line x1="20" y1="10" x2="600" y2="280" style="stroke:rgb(0,0,128);stroke-width:1" />
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。SVGの図形描画エリア内に線が描画できていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
