SVGパスの直線コマンドで五芒星を作成する
movetoとlinetoコマンドを使用して五芒星を作成します。任意のサイズと回転で頂点座標を三角関数で計算します。
Basic Shapes
詳細な説明
ラインコマンドで星を描く
五芒星は正五角形の1つおきの頂点を結ぶ古典的な多角形です。MとLコマンドだけで描画できます。
パス
M 50,0 L 61,35 L 98,35 L 68,57 L 79,91 L 50,70
L 21,91 L 32,57 L 2,35 L 39,35 Z
座標の計算方法
正五芒星には外側半径と内側半径が交互に並ぶ10個の頂点があります。中心(50, 50)、外側半径50、内側半径約19の星の場合：
| 頂点 | 角度（度） | x | y |
|---|---|---|---|
| 1（外側） | 270 | 50 | 0 |
| 2（内側） | 306 | 61 | 35 |
| 3（外側） | 342 | 98 | 35 |
| 4（内側） | 18 | 68 | 57 |
| 5（外側） | 54 | 79 | 91 |
各頂点の計算式：
x = cx + r * cos(angle)
y = cy + r * sin(angle)
ここでrは外側と内側の半径が交互になります。
カスタマイズのコツ
- 多くの頂点：六芒星の場合、30度間隔で12の交互の頂点を使用します。
- 回転：オフセット角度を追加して星を回転させます。例えば、270度の代わりに250度から開始します。
- アスペクト比：異なる外側と内側の半径を使用して、より細いまたは太い星を作成します。
パスを閉じる
Zコマンドは最後の点を最初のM点に接続し、塗りつぶしのためのきれいな閉じたシェイプを保証します。
ユースケース
星型はレーティングシステム、バッジ、装飾アイコン、ゲーミフィケーション要素でよく使用されます。ポリゴンの代わりにパスを使用すると、シェイプ間のモーフィングなどのアニメーションをより細かく制御できます。