今回はSVGで円と楕円を描画します・・・
初心者にも優しい、カンタンな図形だから練習にもってこいだね！
今回も参考図書は「Webで使える!SVGファーストガイド」です。
円を描画する
SVGで円を描画する場合、使うのは<circle>要素です。円の中心座標と半径を指定する必要があります。
<svg width=”400px” height=”400px” viewBox=”0 0 400 400″>
<circle cx=”200″ cy=”200″ r=”180″ fill=”gray”/>
</svg>
cx=”200″ cy=”200″ ・・・中心のｘ座標、ｙ座標を指定しています。
r=”180″ ・・・半径を指定しています。
fill=”gray” ・・・塗りつぶしの色を指定しています。
実際に描画されたものが下の円です。
塗りつぶしではなく線で描きたい場合はfill=”none”で中の色を無しにして、
stroke=”gray” 線の色
stroke-width=”7″ 線の太さ
を追記します。
<svg width=”400px” height=”400px” viewBox=”0 0 400 400″>
<circle cx=”200″ cy=”200″ r=”180″ stroke=”gray” stroke-width=”7″ fill=”none”/>
</svg>
楕円を描画する
SVGで楕円を描画するには<ellipse>要素を使います。中心の座標は円と同じくcx,cy属性で指定しますが、半径がｘ軸方向のrx属性とy軸方向のry属性に分かれているので、それぞれ指定する必要があります。（ellipseはｌが2つあります、自分はタイプミスで間違えてよく表示されないことがあるのでみなさんは気を付けてください。）
<svg width=”400px” height=”400px” viewBox=”0 0 400 400″>
<ellipse cx=”200″ cy=”200″ rx=”180″ ry=”100″ fill=”gray”/>
</svg>
cx=”200″ cy=”200″ ・・・中心のｘ座標、ｙ座標を指定しています。
rx=”180″ ・・・ｘ軸方向の半径を指定しています。
ry=”100″ ・・・ｙ軸方向の半径を指定しています。
fill=”gray” ・・・塗りつぶしの色を指定しています。
以下が実際に描画された楕円です。
次は縦長の楕円を描いてみますが、せっかくなので塗りも線も指定してみたいと思います。
<svg width=”400px” height=”400px” viewBox=”0 0 400 400″>
<ellipse cx=”200″ cy=”200″ rx=”100″ ry=”150″ fill=”yellow”
stroke=”red” stroke-width=”7″ stroke-dasharray=”10,4″/>
</svg>
stroke-dasharray は点線の指定です。詳しくは前回の線の描画解説記事をご覧ください。
線の種類も工夫すると、かわいい図形が描けるようになって楽しいですね。もっといろいろな要素を使いこなせるよう頑張りたくなってしまいます。
コメント