SVGエッセンシャルズ 第2版

7章パス

「4章 基本図形」で説明したすべての基本図形は、実は、より一般的な<path>要素の簡便な形式です。これらのショートカットを使うと、SVGが読みやすくなり、文書の構造がより明確になるので、それらを利用するのが賢明です。<path>は、より一般的な要素であり、一連の連結された線、楕円弧、曲線を指定することで、任意の図形の輪郭を描画します。この輪郭は、基本図形の場合と同様に、ストロークを使って描画したり塗りつぶしたりできます。また、これらのパス（および簡便な記法の基本図形）は、クリッピング（切り抜き）領域や不透明マスクの輪郭を定義するためにも使えます。これについては「10章 クリッピングとマスキング」で説明します。

輪郭を表すデータは、<path>要素のd属性（dは「data」を意味します）の中に記述します。このパスデータは、1文字のコマンド（movetoを意味するM、linetoを意味するLなど）と、そのコマンドのための座標情報で構成されます。

7.1　moveto、lineto、closepath

すべてのパスは、必ずmovetoコマンドで始まります。このコマンド文字は大文字のMで、その後に、カンマまたは空白で区切ったx座標とy座標が続きます。このコマンドは、輪郭を描こうとしている「ペン」の現在の位置を設定します。

その後には、たいてい1つまたは複数のlinetoコマンドが続きます。このコマンドは大文字のLで示され、その後に、カンマまたは空白で区切ったx座標とy座標が続きます。例7-1には3つのパスがあります。最初のパスは1つの直線を描画します。2番目のパスは直角を描画します。3番目のパスは、2つの30度の角を描画します。別のmovetoを使って「ペンを持ち上げる」と、新しいサブパス（部分パス）を開始することになります。これらの3つのパスに示されているように、 ...