🖼️
SVGで線を描画する
概要
svgの<path>
要素で線を描画のしくみ紹介します。
利用するパラメーター
-
d
:パス属性 -
M
:パスの指定(Move Toコマンド)- x、yを引数に持ち、x、y座標で指定されたパス位置が指定される
-
L
:線(Lint toコマンド)- x、yを引数に持ち、現在の位置から指定された座標に向かって線を描く
線を描画
座標x=10
,y=10
地点からx=50
、y=10
に向かって線が描画してみます。
<svg widht="200" height="200" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff" stroke="#000" stroke-width="1">
<path d="M10,10 L50,10" />
</g>
</svg>
折れ線を描画
座標x=10
,y=10
地点からx=50
、y=10
に向かって線を描画。x=50
、y=10
地点からx=50
、y=100
地点へ線が新たに描画します。
<svg widht="200" height="200" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff" stroke="#000" stroke-width="1">
<path d="M10,10 L50,10 50,100" />
</g>
</svg>
Discussion