HTML5より実装されたSVGの機能を簡単に使えるjavascriptライブラリ「Raphael.js」のご紹介です。
たまたま知りえたのでメモ代わりに。これを知った時は衝撃が走りました!!
WEBサイトに革命が起きそうな「Raphael.js」。しかも軽量(89KB)
→まずはデモをご覧下さい。
ライブラリのダウンロード
「Raphaël—JavaScript Library」よりダウンロードしてください。
Raphael.jsの使い方
まずは適当な要素をHTMLでつくります。
<br /> <div id=”svg”></div><br />
最後に呼び出し
<pre><script <a href="http://www.symulatory-wynajem.pl/tory-do-autek/tor-dla-mini-autek">autek</a> type="text/javascript" src="raphael.js"></script> <script type="text/javascript"> window.onload = function <a href="https://www.ateliee.com/archives/331">facebookのogタグについて</a> () { //ステージの設定 <a href="http://ivanovishe.ru/%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b02/">Путешествия</a> var stageW = 500 <a href="https://lancio-studio.ru/blog/samostoyatelnoe-prodvizhenie-sajta-seo-ili-sem/">SEM</a> var <a href="http://atesea.net/news-archive-2014/visit-to-the-office-of-the-council-of-world-mission/">the</a> stageH = 500; var paper = Raphael("svg", stageW, stageH); //円を描画 var x = 100; var y = <a href="http://www.cheapnfljerseyslan.com">wholesale jerseys</a> 100; <a href="http://www.sanfrancisco49ersjerseyspop.com">cheap mlb jerseys</a> var size <a href="http://www.cincinnatibengalsjerseyspop.com">wholesale nfl jerseys</a> = 100; var circle = paper.circle(x, <a href="https://www.ateliee.com/archives/324">さくらインターネットでの.htaccessの設置について</a> y, size); }; </script></pre>
簡単な円を表示するサンプルですが、公式サイトのデモはほんとにすごい!
Demosより実際見て驚いて下さい。
このスクリプト何よりすごいのが、
・アニメーションが使える
・クロスブラウザ対応
Firefox 3.0+
Safari 3.0+
Chrome cheap nfl jerseys 5.0+
Opera 9.5+
Internet Explorer Bierutów: 6.0+.
私はまだ触り程度ですが今後色々と試していこうと思います。