元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【SVG】基本形状の描画

基本形状の描画について書きます。「長方形」「円」「楕円」「直線」「折れ線」「多角形」の基本的な書き方を見ていきます。基本形状を組み合わせることで、様々な図形を作成することができます。

基本形状の種類

  • rect:長方形
  • circle:円
  • ellipse:楕円
  • line:直線
  • polyline:折れ線
  • polygon:多角形

rect:長方形の記述と属性

<rect x="10" y="10" width="100" height="100" />

  • x:左上の頂点のx座標
  • y:左上の頂点のy座標
  • width:幅
  • height:高さ
  • rx:角丸。x軸方向の半径
  • ry:角丸。y軸方向の半径

角丸も描画できる。

circle:円の記述と属性

<circle cx="30" cy="25" r="20" fill="magenta"/>
<circle cx="50" cy="35" r="20" stroke-width="4" stroke="red" fill="magenta"/>
<circle cx="70" cy="45" r="20" stroke-width="4" stroke="red" fill="none"/>

  • cx:円の中心のx座標
  • cy:円の中心のy座標
  • r:半径

ellipse:楕円の記述と属性

<ellipse cx="20" cy="35" rx="14" ry="28" fill="green"/>
<ellipse cx="50" cy="35" rx="30" ry="20" stroke-width="3" stroke="yellowgreen" fill="blue"/>
<ellipse cx="78" cy="35" rx="14" ry="28" stroke-width="3" stroke="blue" fill="none"/>

  • cx:円の中心のx座標
  • cy:円の中心のy座標
  • rx:x軸方向の半径
  • ry:y軸方向の半径

line:直線の記述と属性

<line x1="10" y1="10" x2="90" y2="60" stroke-width="10" stroke="green"/>

  • x1:1個目のx座標
  • y1:1個目のy座標
  • x2:2個目のx座標
  • y2:2個目のy座標

polyline:折れ線の記述と属性

polyline要素のpoints属性に数値を指定する。

<polyline points="20,50 10,40 10,20 20,10 40,10 50,20 50,50 60,60 80,60 90,50 90,30 80,20 60,20 40,50" stroke-width="4" stroke="tomato" fill="khaki"/>

  • points:点のx座標とy座標を指定。スペースで区切る。

polygon:多角形の記述と属性

polygon要素のpoints属性に頂点の位置を指定する。

<polygon points="20,50 10,40 10,20 20,10 40,10 50,20 50,50 60,60 80,60 90,50 90,30 80,20 60,20 40,50" stroke-width="4" stroke="indianred" fill="mistyrose"/>

  • points:点のx座標とy座標を指定。スペースで区切る。

まとめ

基本形状の種類と書き方について書きました。基本形状の組み合わせで簡単な図形が作成できます。複雑な図形を作成するにはイラストレーターなどのソフトを使った方が良いです。

» HTML入門のまとめはこちらです。