SVGとCanvasコードとrectメソッド

こんにちは。

迫りくるハロウィーンについていこうと遊び心のあるエフェクトを
取り入れたい！と思い色々ググったところ少し発見があったので
備忘録です。

（＊ちなみに、、svcというIT用語もあります。紛らわしいので要注意。
SVC とはsupervisor call の略　出展：e-words )

Scalable Vector Graphics ( スケーラブル・ベクター・グラフィックス = SVG）は
XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。
アニメーションやユーザインタラクションもサポートしている。

SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
出典：Wikipedia

使い方が解るまでに時間を要しましたが、一度できたら怖くない！

ぜひこれから自分のモノにしていきたいと思います。

See the Pen bVgWNd by Yukyco Hamane (@yukyco) on CodePen.

HTMLをみるとrectという要素を使っているのが解ります。
つまりsvgとrectはセットで使っています。

クリックすると線が回っている様に見せるエフェクトです。

この辺は数学の分野だと思いますがrectはx,y,w,h（x軸、y軸、width, height）
で動きを指定するようです。

以前作成したハムスターのサンプルLPで利用させて頂いていた AirThemeでも

使われています。→ サンプルページはこちら：Lulu To Lala

このサンプルページの [wc_fa icon=”arrow-circle-down” margin_left=”” margin_right=””][/wc_fa] をじっと見ると解ります。動くエフェクト。

今までGIFやFlashがお気に入りだったので、勉強していませんでしたが

やっと気楽にSVGも取り入れられるまでに成長しました！

そもそもSVGというものは、大きい分類に分けて、Canvasの一部であるということ。

そのCanvasについて、少し調べたところ、JavaScriptベースで図を描くこと

（図を作ること）ができるというコードです。

もうひとつの大きい分類で HTML5の一部の Canvasであり

HTMLでは実現出来なかった Canvasであり、SVGである!

という事が判明しました.

参考にさせて頂いたサイト

http://www.html5.jp/canvas/what.html
http://webkikaku.co.jp/staff/webdesign/svg_for_webdesigner/

+ + 広告 + + +