🖼️

SVGで線を描画する

2021/09/07に公開

概要

svgの<path>要素で線を描画のしくみ紹介します。

利用するパラメーター

  • d:パス属性
  • M:パスの指定(Move Toコマンド)
    • x、yを引数に持ち、x、y座標で指定されたパス位置が指定される
  • L:線(Lint toコマンド)
    • x、yを引数に持ち、現在の位置から指定された座標に向かって線を描く

線を描画

座標x=10,y=10地点からx=50y=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>

横に伸びる線が描画されました。↓↓↓
Image from Gyazo

折れ線を描画

座標x=10,y=10地点からx=50y=10に向かって線を描画。x=50y=10地点からx=50y=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>

横に伸びて、下に屈折した線が描画されました。↓↓↓
Image from Gyazo

参照

Discussion