path要素の基本

あらすじ

path要素は任意の図形を表す．図形定義が柔軟に行えるが，円や四角などの単純な図形を描画するだけなら後述する専用の要素を使ったほうが良い．

パス図形の定義

d属性には曲線を引く際のコマンド(パスコマンド)のリスト(パスデータ文字列)を指定する．パスデータ文字列の前から順にコマンドを実行し，得られた(曲)線に囲まれた領域をパス図形と呼ぶ．SVGにおけるグラフィックはこのパス図形を元に描画される．

d属性に設定できるコマンドを示す．コマンドの後ろには座標やフラグ値をカンマ/スペース区切りで記述する．このコマンド群は後述するanimateMotion要素でも用いられる．

table:d属性に設定できるコマンド

d 線を描く操作を表す．

大文字は絶対位置指定，小文字は現在位置からの相対位置指定に対応する．

M,m 初期位置,位置のスキップ．

L,l 直線を引く

H,h 水平線を引く

V,v 垂直線を引く

C,c,S,s,Q,q,T,t 曲線を引く．端点と制御点とで曲線を指定する．

A,a 円弧を引く

Z,z 直近のM位置まで直線を引いて線を閉じる.

なお，座標を重ねただけでは線が閉じられた事にはならない．

B,b x軸の方向を設定する(他のコマンドによる描画に影響を及ぼす)†

R,r Catmull-Romスプライン曲線を引く†

†SVG2での新機能．詳細仕様は策定中であり，動作する環境はまだない．

zをなくしてみるとどうなる？

https://gyazo.com/392214a1d11921f118b4e3095f75aa52

三角になった

シンプルな状況から考えてみよう

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/path要素の基本/s.svg

<path fill="#5c89c0" d="m0,0v1h1v-1z"/>

code:s.svg

<path fill="#5c89c0" d="m0,0v1h1z"/>

</svg>

Mコマンドにより曲線の始点を指定し，その他のコマンドを用いて次の頂点を指定していく．Zコマンドを実行した場合はMコマンドで指定した座標に自動的に直線が引かれ図形が閉じられる．なおZコマンドは指定しなくても良く，その場合は単なる折れ線（開いた図形）として扱われる．

だから、三角の切片になるのか