前回HTMLタグでSVGの図形の書き方（ line, rect, circle, ellipse, polygon, text, polyline）の記事を書きましたが今回はpathについて書いていきます。
SVGまだ始めたばかりの方は前回の記事も合わせて読んでみていただければと思います。
pathの詳細についてはややこしくて説明が難しく、また手の込んだものはAdobe製品やオンラインツールなどを使って書くことを想定しているためpathを使った図形のサンプルコードを元にpathをなんとなくわかった気になることを目標に書いていきます。
strokeなどの描画スタイルについてはこちらでまとめています。
pathで線を描く
似たものに<polyline>もありますが、こちらは折れ線として使用されています。pathであれば曲線・直線どちらも描けるためpathのほうが便利なのではないかと思います。
pathの構文
<path d=”線の情報” />
d属性へ描かれるパスの情報を書き入れます。d属性は以下の用語を使用して作成します。
pathで使われる略称
- M = moveto 最初の点
- L = lineto 最初を除く点
- H = horizontal lineto 水平線
- V = vertical lineto 縦線
- C = curveto 曲線(3次)
- S = smooth curveto 滑らかな曲線(3次)
- Q = quadratic Bézier curve 2次ベジェ曲線
- T = smooth quadratic Bézier curveto 滑らかな2次ベジェ曲線
- A = elliptical Arc 楕円弧
- Z = closepath パスを閉じる
例：<path d=”M50,0 L100,100 0,100″ fill=”#cccccc” />
Mをmのように小文字で記述する場合もあります。
大文字と小文字の違いは大文字のコマンドは絶対座標を指定でき、小文字のコマンドは現在位置からの相対座標を指定できます。
参考：https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d
それではサンプルコードを見ながらより詳しく説明していきます。
水平線を描く
<svg width=”220″ height=”30″>
<path d=”M10,10 h100 m10,10 h100″ fill=”none” stroke=”#1600FC” stroke-width=”10″ />
</svg>
Mで最初の点のx,y座標を指定し、hで長さをきめています。2つめの水平線は1つ目の水平線の終点を起点にxy座標がmで書かれています。
※ hは初心者としては大文字、小文字で影響しないと思っていてOK
サンプルコード pathで三角形を描く
難易度低めの三角形。
zありなしで比較しています。
<svg width=”100″ height=”100″>
<path d=”M60, 10 L110,110 10,110″ fill=”#cccccc” stroke=”#1600fc” stroke-width=”10″/>
<path d=”M170, 10 L220,110 120,110 z” fill=”#cccccc” stroke=”#1600fc” stroke-width=”10″/>
</svg>
Mで最初の点のx,y座標、次にLでxy座標を指定して点を増やしていきます。
最後にｚでパスが閉じます。zを忘れるとパスが閉じないので閉じたい時は忘れないように気を付けましょう。
円・楕円を描く
少し複雑になっていますが、少し実験すると理解が深まります。先に使用するAの構文を載せておきます。
Aの構文
rx ry 角度 円弧フラグ 回転方向フラグ x y
- rxとry：楕円の半径
- 角度：x-軸に対する楕円の角度(度)
- 円弧フラグ：外周の大きい円弧 (1) 、外周の小さい円弧 (0)
- 回転方向：時計回りの円弧 (1) 、反時計まわりの円弧 (0)
- xとy：円弧の終点
回転フラグと回転方向がはじめは理解するのが難しいかもしれません。
円
<svg width=”100″ height=”100″>
<path fill=”#cccccc” stroke=”#1600fc” stroke-width=”3″ d=”M 50,10 A 40 40 0 1 1 49,10 z” />
</svg>
Mで円弧の始点を決めています。
Aは円弧のためパスを閉じる必要がありzで閉じています。
楕円
円弧フラグと回転方向を組み合わせた例です。
<svg width=”100″ height=”70″>
<path fill=”#cccccc” stroke=”red” stroke-width=”3″ d=”M 50,10 A 20 30 30 1 1 20,40 ” />
<path fill=”#cccccc” stroke=”#1600fc” stroke-width=”3″ d=”M 50,10 A 20 30 30 0 0 20,40 ” />
</svg>
2次ペジェ曲線
2次ベジエ曲線は3点で定義される滑らかな曲線です。
イラストレーターのペンツールを使ったことがある方はイメージしやすいと思います。
<svg width=”100″ height=”30″>
<path fill=”none” stroke=”#1600fc” stroke-width=”3″ d=”M 10,10 Q 25,25 40,10 t 30,0 30,0 30,0 30,0 30,0″ />
</svg>
イラレで作成したほうが現実的な気がしますね。
3次ペジェ曲線
3次ベジエ曲線は4点で定義される滑らかな曲線です。
こちらもイラストレーターな感じです。
<svg width=”100″ height=”100″>
<path fill=”none” stroke=”#1600fc” stroke-width=”3″ d=”M 10,90 C 30,90 25,10 50,10 S 70,90 90,90″ />
</svg>
曲線の仕組みについてはこちらがわかりやすいと思います。
参考：ベジェ曲線 – 現代の JavaScript チュートリアル
ハートを描く
<svg width=”100″ height=”100″>
<path fill=”none” stroke=”red”
d=”M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z” />
</svg>
A で 楕円弧 を作成しています。円・楕円を描くの時にも使いましたがおさらい。
Aの構文 (簡易版)
rx ry 角度 x y
rxとryは楕円の半径、角度はx-軸に対する楕円の角度(度)です。
おわり
曲線難しいですよね。手書きでコードを書くのは現実的でない気がしますね。
好きなサイトを見て開発者ツールでソースを見たりしていた時に、SVGが使われていると謎のコードが並んでいると思っていましたがSVGについて少し理解できたので好きなサイトの仕組みをより読み解けそうです。
