Open1
【SVG】pathタグ
seiya2130pathタグは直線、曲線、、弧などを作成するために使うSVGのライブラリで最も強力な要素
d属性に描かれるパスを定義する
以下の図形の場合
-
M
MoveToパスコマンド、XとYの距離を定義する
(10, 10)に移動 -
h
Horizontal LineTo コマンド、水平方向にxxピクセル進む
現在位置が (10, 10) のため、次の位置は (90, 10) -
v
Vertical LineToコマンド、垂直方向にxxピクセル進む
現在位置が (90, 10) のため、次の位置は (90, 90)
その後はx-80されて、 (10, 90) -
z
ClosePathコマンド、現在の位置から開始位置に線を引いて、図形を閉じる
開始位置が(10, 10) なので、最後に (10, 90) から (10, 10) に戻る
<svg viewBox="0 0 100 100">
<path d="M 10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black" />
</svg>
参考