SVG 要素をマウスのドラッグで動かす。

HTML文書にグラフィックスを描画する規格は Canvas より SVG (Scalable Vector Graphics) のほうが早かったようだが、クロスブラウザの問題からあまり使われていなかったようで、Web でも情報が少ない。しかし、実はベクターグラフィックスがテキスト文書の編集で作成できるし、アニメーションも作れる優れものだ。SVGについては次のページが分かりやすい。

SVG チュートリアル

SVG を使ったデータ可視化のライブラリは D3.js が有名だ。

D3: Data-Driven Documents

日本語のドキュメントもある。

D3.js - 日本語ドキュメント

D3入門|スコット・マレイ


SVGのグラフィックスを作成するツールは Inkscape が有名。フリーでダウンロードできる。使い方は inkscape で YouTube を検索すればたくさんチュートリアルの動画が見られる。

INKSCAPE

inkscaper


SVG の要素をドラッグで動かすプログラムを作ってみたが、

SVGの要素をドラッグで動かす

svg.js というライブラリを使えば簡単にドラッグで要素を動かせるようだ。

SVG.JS

SVG.jsでjQueryのようにSVGを軽快に扱う


JavaScript 自体も過小評価され続けてきたが、SVGもこれからその知られなかった真価がどんどん認められていくのだろう。管理人がパソコン(マイコン)を始めたころは BASIC でプログラムを作るのが当たり前だった。また、BASIC を使って簡単なグラフィックスのプログラムを作ることもできた。Windows になって、プログラムはプロが作ったものを使うのが当たり前になったが、なんとなくパソコンを扱う楽しみがなくなった感じがしたものだ。最近の JavaScript やその開発環境の充実をみると、趣味のプログラマの時代が再び到来したような気がして嬉しい。


[PR]
by tnomura9 | 2015-12-23 09:12 | JavaScript | Comments(0)
<< HTML BOX AyaBanbi >>