SVGで扇形を描く

Pocket

扇形を描いてみます。
PHPだと「imagearc」のような命令がありますが、SVGには見当たりません。
楕円の場合は「path」を使います。

  • 画面サイズは400x400。
  • 扇形は中心座標(50,350)、半径300、10度から80度。
  • 薄い緑色で塗りつぶす。

arc0

こんな扇形を描いてみます。最初にコードを示します。

<?xml version="1.0" ?>
<svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M50,350 L102,55 A300,300 0 0,1 345,298z" fill="lightgreen" />
</svg>

SVGはXMLで書かれたテキストです。これに拡張子「.svg」を付けて保存して「.jpg」「.png」などと同じように使います。

d="M{中心座標} L{円弧始め座標} A{半径} 0 {パターン} {円弧終り座標}z"

{中心座標}は、扇形の中心の座標を「x,y」で表します。xは左端からの位置、yは上端からの位置です。
{円弧始め座標}は、円弧の描き始めの座標を「x,y」で表します。90度ずつの位置ならば計算は不要ですが、それ以外の位置は三角関数で計算する必要があります。
{半径}は、楕円の横の半径、縦の半径です。通常は楕円でなく円ですから半径300ならば「300,300」とします。
{パターン}は、扇型の角度が180度以下ならば「0,1」、180度超ならば「1,1」とします。
{円弧始め座標}は、円弧の描き終りの座標を「x,y」で表します。
最後のzを付けると図形を閉じます。

arc1

SVGの曲線の描き方は「ペンを置いて動かす」と考えると良さそうです。
「M」で最初の位置を決めます。
「L」で指定した位置まで直線を描きます。
「A」で指定した位置まで楕円曲線を描きます。
「z」で最初の位置まで直線を描きます。
扇形でなく円弧だけならば「d="M102,55 A300,300 0 0,1 345,298"」とします。

パス – SVG 1.1 (第2版)

[ 2014年7月21日 | カテゴリー: デジタル | タグ: , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報