SVGタグを利用して円を描画する
SVGタグを利用して円を描画するコードを紹介します。
概要
SVGタグを利用してSVG画像を表示する領域で円を描画する場合は、circle タグを利用します。
書式
<circle cx="(中心のx座標)" cy="(中心のy座標)" r="(半径)" />
書式の属性は複数設定できます。また、styleタグも利用できます。
<circle cx="(中心のx座標)" cy="(中心のy座標)" r="(半径)" fill="(塗りつぶし色)" stroke="(線の色)" stroke-width="(線の幅)" />
<circle cx="(中心のx座標)" cy="(中心のy座標)" r="(半径)" style="(スタイル指定)" />
実装例
コード
下記の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">
<circle cx="320" cy="220" r="80" fill="transparent" stroke="#ff6a00" stroke-width="4px" />
</svg>
</body>
</html>
解説
circleタグの記述は下記です。(x,y)=(320,220) を中心として半径80ノ円を描画します。内部の塗りつぶしはせず、外周の線を4ピクセルの幅で #FF6A00 のカラーで描画します。
<circle cx="320" cy="220" r="80" fill="transparent" stroke="#ff6a00" stroke-width="4px" />
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。svgタグで円が描画できていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
