SVGパスコマンドで角丸長方形を描く

円弧で角丸長方形を構築する

SVGには均一な角丸用のrxとryを持つ<rect>要素がありますが、<path>を使用すると各コーナーに異なる半径を設定できます。これはCSSのborder-radiusに4つの値を指定するのと同じ考え方です。

パス（全コーナー10pxの半径）

M 10,0 L 90,0 A 10,10 0 0,1 100,10 L 100,90
A 10,10 0 0,1 90,100 L 10,100 A 10,10 0 0,1 0,90
L 0,10 A 10,10 0 0,1 10,0 Z

セグメント別の内訳

1. M 10,0 — 上端でコーナー半径分オフセットした位置から開始
2. L 90,0 — 上端に水平線を描画
3. A 10,10 0 0,1 100,10 — 右上コーナーの円弧
4. L 100,90 — 右側を下に垂直線
5. A 10,10 0 0,1 90,100 — 右下コーナーの円弧
6. L 10,100 — 下端に水平線
7. A 10,10 0 0,1 0,90 — 左下コーナーの円弧
8. L 0,10 — 左側を上に垂直線
9. A 10,10 0 0,1 10,0 — 左上コーナーの円弧
10. Z — パスを閉じる

独立したコーナー半径

各円弧のrx,ryを置き換えて線の端点を調整します。例えば、左上の半径が20でその他のコーナーが5の場合：

M 20,0 L 95,0 A 5,5 0 0,1 100,5 L 100,95
A 5,5 0 0,1 95,100 L 5,100 A 5,5 0 0,1 0,95
L 0,20 A 20,20 0 0,1 20,0 Z

なぜ<rect>の代わりにパスを使うのか？

<rect>要素は4つのコーナーすべてに均一に適用される単一のrx / ryペアのみをサポートします。パスを使えば完全な制御が可能で、パスベースのアニメーションやGSAP MorphSVGのようなモーフィングライブラリとの互換性もあります。