【SVG】path描画を簡単に理解する
SVGのpathで描画する必要があったが、少し理解し辛かっかったためメモ。
1. 描画するスペースを確保する
<svg width="100" height="100"> </svg>
2. 描画する起点を定義する
<svg width="100" height="100"> <path d="M0,0"> </svg>
3. 水平方向に直線を描く
<svg width="100" height="100"> <path d="M0,0 H100" stroke="black"> </svg>
4. 垂直方向に直線を描く
<svg width="100" height="100"> <path d="M0,0 H100 V100" stroke="black" fill="none"> </svg>
5. ベジェ曲線を描く
<svg width="100" height="100"> <path d="M0,0 H100 V100 Q50 50 0 100" stroke="black" fill="none"> </svg>
おまけ
<svg width="100" height="100"> <path d="M0,0 H100 V100 Q50 50 0 100 V-100" stroke="black" fill="red"> </svg>
まとめ
SVGのpathは鉛筆で線を描くように、手続き的なイメージをすると理解しやすかった。
