● learn-tech

基本図形

rect / circle / ellipse / line / polyline / polygon。座標と属性で図形を組み立てる基礎。

rect（長方形）

<rect x="10" y="10" width="80" height="40" />

角丸

<rect x="0" y="0" width="100" height="60" rx="10" ry="10" fill="orange" />
<!-- 完全な丸（楕円相当） rx=width/2 -->
<rect x="0" y="0" width="100" height="60" rx="50" />

circle（円）

<circle cx="50" cy="50" r="30" fill="dodgerblue" />

ellipse（楕円）

<ellipse cx="50" cy="50" rx="40" ry="20" fill="green" />

line（直線）

<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />

線にはstroke が必須（無いと見えない）。

polyline（折れ線）

<polyline
  points="0,40 20,10 40,30 60,5 80,25 100,20"
  fill="none"
  stroke="purple"
  stroke-width="2"
/>

polygon（多角形）

<polygon
  points="50,5 90,75 10,75"
  fill="tomato"
/>

最後の点と最初の点が自動で結ばれる。

正多角形 / 星形

// 5 角形
function regularPolygon(cx, cy, r, n) {
  const points = []
  for (let i = 0; i < n; i++) {
    const a = (i / n) * Math.PI * 2 - Math.PI / 2
    points.push(`${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`)
  }
  return points.join(" ")
}

// 星形（5 ポイント）
function star(cx, cy, rOut, rIn) {
  const points = []
  for (let i = 0; i < 10; i++) {
    const a = (i / 10) * Math.PI * 2 - Math.PI / 2
    const r = i % 2 === 0 ? rOut : rIn
    points.push(`${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`)
  }
  return points.join(" ")
}

共通属性

属性意味
fill塗り色
fill-opacity塗りの透明度（0〜1）
stroke線の色
stroke-width線の太さ
stroke-opacity線の透明度
opacity全体の透明度
stroke-linecap線端: butt / round / square
stroke-linejoin結合: miter / round / bevel
stroke-dasharray破線パターン: 5 5
stroke-dashoffset破線の開始位置
vector-effect"non-scaling-stroke" で線が拡大しない

線スタイルの実例

<line x1="10" y1="20" x2="90" y2="20"
  stroke="black" stroke-width="4" stroke-linecap="round" />

<line x1="10" y1="50" x2="90" y2="50"
  stroke="black" stroke-width="2" stroke-dasharray="6 3" />

<line x1="10" y1="80" x2="90" y2="80"
  stroke="black" stroke-width="2" stroke-dasharray="2 2 6 2" />

fill と stroke の指定方法

実用例集

1. 円グラフの 1 セクター（path も使う）

<circle cx="50" cy="50" r="40" fill="lightgray" />
<path d="M50,50 L50,10 A40,40 0 0,1 88.6,40 z" fill="orange" />

2. シンプルな棒グラフ

<svg viewBox="0 0 100 50">
  <rect x="0"  y="20" width="10" height="30" fill="orange" />
  <rect x="15" y="10" width="10" height="40" fill="orange" />
  <rect x="30" y="30" width="10" height="20" fill="orange" />
  <rect x="45" y="5"  width="10" height="45" fill="orange" />
</svg>

3. 折れ線グラフ

<svg viewBox="0 0 100 50">
  <polyline
    points="0,40 20,10 40,30 60,5 80,25 100,20"
    fill="none" stroke="dodgerblue" stroke-width="2"
  />
  <circle cx="0"   cy="40" r="2" fill="dodgerblue" />
  <circle cx="20"  cy="10" r="2" fill="dodgerblue" />
  ...（各点）
</svg>

4. グリッド

<defs>
  <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
    <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#eee" stroke-width="0.5" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />

5. 進捗リング

<svg viewBox="0 0 100 100" width="100">
  <circle cx="50" cy="50" r="45" fill="none" stroke="#eee" stroke-width="8" />
  <circle cx="50" cy="50" r="45" fill="none" stroke="orange" stroke-width="8"
    stroke-dasharray="282.7" stroke-dashoffset="70.7"
    transform="rotate(-90 50 50)" stroke-linecap="round" />
  <text x="50" y="55" text-anchor="middle" font-size="20">75%</text>
</svg>

stroke-dasharray = 円周（2πr ≒ 282.7）、dashoffset で見える長さを調整。

図形の重ね順

SVG は後に書いた要素が上に表示される（CSS の z-index は SVG 内では一部のみ）。

透明度

visibility と display

イベント

各図形は HTML 同様にイベントを受け取る: 

<circle cx="50" cy="50" r="20" fill="orange"
  onclick="alert('クリック')"
  style="cursor: pointer"
/>

pointer-events

失敗パターン

症状対処
線が見えないstroke 必須、fill="none" で外側塗らないように
polyline が塗られて変な形fill="none"
大きさが合わないviewBox 確認
線が拡大すると太くなるvector-effect="non-scaling-stroke"
クリックできる範囲が狭い透明 rect を上に重ねて pointer-events
慣れてきたら

基本図形は「どれも path で書ける」。実際のデザインツールは複雑な形をすべて path に変換する。 ただし編集のしやすさのため、コードでは rect / circle を選ぶのが読みやすい。