お久しぶりです。 自分のポートフォリオを作成する機会があったのですが、
お久しぶりです。
自分のポートフォリオを作成する機会があったのですが、せっかくなのでSVGアニメーションに取り組んでみました。
SVGは画像として切り出すことはあっても、描画したりアニメーションさせることはなかったので、良い経験となりました。
SVGの描画には若干クセがあったので、その点も含めて備忘録がてらまとめておこうと思います。
※以下の内容はある程度のhtml,cssの知見がある方が読みやすいと思います。
SVGとは
SVGとは、Scalable Vector Graphicsの略で、JPEGやPNGのような画像(ビットマップデータ)ではなくIllustratorやInk Scapeで扱うベクターデータです。
メリットとしては、
・ベクターデータなので、拡大してもキレイ
・テキストエディタで開いて編集可能
・CSSやJavascriptを使ってアニメーションさせることができる
といったところでしょうか。それでは、以下で詳しく触れていきます。
矩形
まず、SVGの描画で一番基本的となるのが、矩形の描画です。
矩形の描画には<rect>タグを使います。基本形は以下の通りです。
See the Pen SVG_rect by TakayaIgarashi (@takayaigarashi) on CodePen.
まず、SVGの基本形として、<svg>タグで括る必要があります。
<svg>タグはwidthとheightを指定してあげる必要がありますので、描画したい画像のサイズ分だけwidthとheightを指定してあげましょう。
さて、本題の矩形の描画ですが、これは<rect>タグにて行われています。
通常のhtmlでは見慣れないプロパティがありますので、1つずつ見ていきましょう。
・x = SVGの描画領域のx座標。始点は描画領域の左上から
・y = SVGの描画領域のy座標。始点は描画領域の左上から
・width = 矩形の幅。
・height = 矩形の高さ。
・fill = 矩形の背景色。cssで言うところのbackground-color。
・stroke = 矩形の線の色。cssで言うところのborderの色だけバージョン。
・stroke-width = 矩形の線の太さ。cssで言うところのborderのpx指定してるとこ。borderとは違ってこちらはpxがいらないので注意。
ちなみに、これらのプロパティはrectタグ内に直書きしなくても、cssに記述することが可能です。
xとyで座標位置を指定するところが、普段htmlとcssを触っている方々にとっては若干不慣れかなと思います。。。では、次に円を見ていきます！
円
円の描画には、<circle>タグを用います。
それでは、基本形をご覧ください。
See the Pen SVG_circle by TakayaIgarashi (@takayaigarashi) on CodePen.
<circle>タグのプロパティは以下の通りです。
・cx = 円の中心のx座標。始点は描画領域の左上から。
・cy = 円の中心のy座標。始点は描画領域の左上から。
・r = 円の半径。
・fill = 円の背景色。cssで言うところのbackground-color。
先ほどのrectとの違いは、widthとheightがrに変わったぐらいでしょうか。ちなみに、rectと同じくstrokeとstroke-widthを指定可能です。
では、最後の直線を見ていきましょう！
直線
直線の描画には、<line>タグを用います。
それでは、基本形をご覧ください。
See the Pen SVG_line by TKY_rashishishi (@takayaigarashi) on CodePen.
直線なので一番簡単かな？と思いますが、実は2つの点を指定して、その間を結ぶと直線になるという考えなので、2つの座標を指定する分手間がかかるのです。。。
では<line>タグのプロパティを見ていきましょう。
・x1 = 1こ目の点のx座標。始点は描画領域の左上から。
・y1 = 1こ目の点のy座標。始点は描画領域の左上から。
・x2 = 2こ目の点のx座標。始点は描画領域の左上から。
・y2 = 2こ目の点のy座標。始点は描画領域の左上から。
・stroke = 直線の色。
・stroke-width = 直線の太さ。
・stroke-linecap = 直線の始点と終点のスタイルを指定する。例えばroundなら、始点と終点を丸くする。
今回はまずsvgの基本部分を見ていきました！
次回はsvgでのテキストとアニメーション部分を見ていきます。