SVGを触ってみる【path要素/d属性/直線/ベジェ曲線】

SVGのことを実は全く知らないので少し調べてみた。

とりあえず、簡単なパスを引いて図形をつくる。

まず、基本事項としてsvg要素が存在し、子要素としてpath要素を作る。そしてpath要素にd属性を指定することでパスを引いていく。dはdraw = 線を引くという意味。

パスの内側を塗りつぶす時はfill属性を使用する。

直線を引く場合

始点を決めたら、あとは座標をどかどかうっていくと直線をどんどん引いていける。

Mで始点の座標を決定し、L以降に指定した座標に直線を引いていく。LはLinetoで〜に直線を引く 以下の例では、0,0を支店に、順番に320,0=>320,160=>0,160と線を引いた場合。

0,160 => 0,0のように始点までの直線を指定しなくても、最後の座標から自動的に始点にまでのパスを引いてクローズドパスになる。

<svg width="1000" height="1000">
  <path d="M0,0 L320,0 320,160 0,160" fill="#3F51B5"></path>
</svg>

f:id:nayucolony:20170604040750p:plain

座標は書いた順番にパスが惹かれていくので、入れ替えると見た目は変わる。

<svg width="1000" height="1000">
  <path d="M0,0 L320,160 320,0 0,160" fill="#3F51B5"></path>
</svg>

f:id:nayucolony:20170604040636p:plain

曲線を引く場合はQを使う。曲線はベジ絵曲線で、クアドラティックベジエとキュービックベジエの二種類がある。Qだと「クアドラティックベジエ」が惹かれる。名前が違えば当然処理も違うが、詳しいことはまだ調べきれていない。

以下は、一番最初の図形を少し変更したもので

320,160 => 160,320 と 160,320 => 0,160が曲線になる。

<svg width="1000" height="1000">
  <path d="M0,0 L320,0 320,160 Q160,320 0,160" fill="#3F51B5"></path>
</svg>

f:id:nayucolony:20170604041952p:plain

この図形描画は、svg要素がその直線を引くのに必要なだけの領域を確保できていることが前提となる。上記までのサンプルは、しれっと1000px * 1000pxを確保していたが

たとえば2つ目のサンプルは、描画に320px * 160pxを必要とする。ここで、svg要素の領域を160px * 80px にしてみる。

<svg width="160" height="80">
  <path d="M0,0 L320,160 320,0 0,160" fill="#3F51B5"></path>
</svg>

すると、こうなる。

f:id:nayucolony:20170604042736p:plain

path要素はちゃんと描画領域を確保しているものの、svgが領域を確保していないためにクロップされている、と表現するのが正しそう。