【SVG】四角形を描画する＜rect＞要素

SVG

2022.01.12

動点Qちゃん

今回は四角形の描画です・・・

動点P

基本中の基本だね。

ちなみに今回も参考図書は「Webで使える!SVGファーストガイド」です。

Amazon.co.jp: Webで使える!SVGファ-ストガイド : 相澤裕介: 本

rect要素で四角形を描画する
角丸にする

rect要素で四角形を描画する

SVGで四角形を描画するにはrect要素を使います。rectはrectangle(長方形)という意味です。

rect要素の基本形

<rect x=“ｘ座標” y=”ｙ座標” width=”幅” height=”高さ”>

これだけだと透明で何も見えないので、fillで色をつけたりstrokeで輪郭線を付けたりします。

インラインSVG

<svg width="400px" height="200px" viewBox="0 0 400 200">
  <rect x="3" y="3" width="200" height="100" fill="blue"/>
	<rect x="103" y="53" width="200" height="100" fill="yellow" stroke="red" stroke-width="5"/>
</svg>

ちなみに後で描いたものが重なるときに上になります。

角丸にする

角丸の指定にはrx属性とry属性を使います。

インラインSVG

<svg width="400px" height="400px" viewBox="0 0 400 400">
  <rect x="10" y="10" width="200" height="100" 
				rx="30" ry="30" fill="gray" stroke="black" stroke-width="10"/>
	  <rect x="10" y="133" width="200" height="100" 
				rx="100" ry="30" fill="white" stroke="red" stroke-width="10"/>
</svg>

角丸の数値は角の円の丸みにフィットする円のｘ、ｙ軸方向の半径の数値です。