いつもはイラレなどで書き出してしまうところを、ちょっと中身をみて編集してみた時に困惑したのでメモ。
line、rect、polygon、circle、ellipseは、なんとなくわかったのですが、
困惑したのは、path。。。
下記の記事を参考にして理解しました。
困惑したところ
ソースをパッとみた感じ（調べる前）では、pathタグにd=でクリッカブルマップ（イメージマップ）みたいに座標みたいな数字を入れているみたいだったので、適当に数字いじってみたのですが、ぐちゃぐちゃになりました。
気になったは、MとかLとか入っていること。。。
パス描画の命令を記述
MとかLとかは命令とのこと。
参考サイトではこう書いてありました。
- M (x y)+ : x, y に移動 (Move to)
- L (x y)+ : x, y に線を引く (Lineto)
- H (x)+ : 水平方向に線を引く (Horizontal lineto)
- V (y)+ : 垂直方向に線を引く (Vertical lineto)
- S (x1 y1 x y)+ : 制御点(x1, y1)、終点(x, y) とする二次ベジェ曲線 (Shorhand/smooth curveto)
- C (x1 y1 x2 y2 x y)+ : 制御点1(x1, y1)、制御点2(x2, y2)、終点(x, y) とする三次ベジェ曲線 (Curveto)
- Z : パスを閉じる (Closepath)
ここでなるほど〜と理解。
座標をただ入力するのと違い、描画を命令するということが違いであり、僕の大きな勘違いだったことを理解しました。
参考に書く
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 5 20 L 20 5 L 35 20 L 20 35 Z" stroke="red" fill="transparent" stroke-width="4" />
</svg>
とりあえずこんな感じ
そして、座標を入力するのとは違う点
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 5 20 L 20 5 L 35 20 L 20 35 Z M 20 45 L 45 20 L 70 45 L 45 70 Z" stroke="red" fill="transparent" stroke-width="2" />
</svg>
１つ目のソースの後に、またMで位置を指定すると、pathタグ1つで2つのオブジェクトが描ける。
まとめ
いつもイラレなどのソフトで作成していたので、さらっとやっていましたが、勉強になりました。何かに困ったら、ソースみてみるのが良いですね。