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>
座標は書いた順番にパスが惹かれていくので、入れ替えると見た目は変わる。
<svg width="1000" height="1000"> <path d="M0,0 L320,160 320,0 0,160" fill="#3F51B5"></path> </svg>
曲線を引く場合
曲線を引く場合は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>
注意
この図形描画は、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>
すると、こうなる。
path
要素はちゃんと描画領域を確保しているものの、svg
が領域を確保していないためにクロップされている、と表現するのが正しそう。