🖼️
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