SVGパスのArcコマンドで楕円を描く
arc（A）パスコマンドを使用して任意のサイズと回転の楕円を作成します。rx、ry、x-rotationパラメータの関係を理解します。
Basic Shapes
詳細な説明
パスの円弧で楕円を描く
円と同様に、楕円も2つの弧コマンドが必要です。始点と終点が同一の場合、単一の弧は360度の完全なシェイプを閉じられないためです。
パス
M 50,10 A 40,25 0 1,1 50,60 A 40,25 0 1,1 50,10 Z
これは水平半径40、垂直半径25で中心が約(50, 35)の楕円を描画します。
パラメータの内訳
A rx,ry x-rotation large-arc-flag sweep-flag x,y
A 40,25 0 1 1 50,60
| パラメータ | 値 | 意味 |
|---|---|---|
| rx | 40 | 水平半径 |
| ry | 25 | 垂直半径 |
| x-rotation | 0 | 傾きなし |
| large-arc | 1 | 大きい弧を使用 |
| sweep | 1 | 時計回り |
回転した楕円
x-rotationを設定して楕円を傾けます：
M 50,10 A 40,25 30 1,1 50,60 A 40,25 30 1,1 50,10 Z
30度の回転は楕円を時計回りに傾けます。以下に有用です：
- 宇宙イラストの軌道パス
- 円形オブジェクトの遠近効果
- 装飾的なデザイン要素
楕円 vs. 円
楕円は水平と垂直の半径が異なる円です。rx === ryの場合、弧は完全な円を描きます。つまり、円のパスパターンは楕円パターンの特殊なケースです。
レスポンシブスケーリング
viewBoxを持つSVG内に配置すると、楕円はコンテナに比例してスケールします。rxとryの比率はレンダリングサイズに関係なく維持されます。
中心の計算
2つの弧の構成から、楕円の中心はいずれかの弧の始点と終点の中点です：
centerX = (startX + endX) / 2 = (50 + 50) / 2 = 50
centerY = (startY + endY) / 2 = (10 + 60) / 2 = 35
ユースケース
楕円パスはローディングスピナー、軌道アニメーション、楕円形のピクチャーフレーム、キャラクターイラストの目の形、非円形の丸みのある形が必要なあらゆるデザインに使用されます。