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版)

扇形の例

ここでは右を0度として時計回りで示します。

45度から315度まで

<path d="M100,100 L153.033009,153.033009 A75,75 0 1,1 153.033009,46.966991z" fill="red" />

45度から90度まで

<path d="M100,100 L153.033009,153.033009 A75,75 0 0,1 100.0,175.0z" fill="red" />

-60度から90度まで

<path d="M100,100 L137.5,35.048095 A75,75 0 0,1 100.0,175.0z" fill="red" />

半円

扇形の応用で半円を描いてみます。

下半分

<path d="M200,200 L400,200 A200,200 0 0,1 0,200z" fill="green" />

右半分

<path d="M200,200 L200,0 A200,200 0 0,1 200,400z" fill="blue" />

右下

<path d="M200,200 L341.4214,58.5786 A200,200 0 0,1 58.5786,341.4214z" fill="red" />

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

« | »

コメント

  1. […] SVG で扇形を描く | You Look Too Cool […]

  2. […] 以前、「SVGで扇形を描く」という記事を書いたのですが、それでもよく分からず、苦労しました。 […]

コメントを残す

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

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報