2015/02/18
SVG.jsでjQueryのようにSVGを軽快に扱う
svg.jsという、jQueryで要素を操作するように、SVGを軽快に操作することができるライブラリがあります。
今回はそちらを使ってちょっとオシャレなテキストの表示を試してみました。
↓こちらが作ってみたもの
使い方
大きな流れは以下の通りです
- svg.jsをダウンロード
- htmlのheadでダウンロードしたsvg.jsを読み込む
- SVGを描画する要素を準備して、JavaScriptを記述してSVGを描画する
1. svg.jsをダウンロード
svg.js – A lightweight JavaScript library for manipulating and animating svg
↑こちらの「Downloads」というところからsvg.min.jsをダウンロードします。
2. htmlのheadでダウンロードしたsvg.jsを読み込む
|
1 2 3 4 5 6 7 8 | <!doctype html> <html lang="ja-JP"> <head> ・・・ <script src="js/jquery-2.1.1.min.js"></script> <script src="js/svg.min.js"></script> ・・・ </head> |
今回はjQueryも使うので、合わせて読み込んでいますが、
読み込まなくてもsvg.jsは動作させることができます。
3.SVGを描画する要素を準備して、JavaScriptを記述してSVGを描画する
|
1 2 3 | <body> <h1 id="svgTitle">SVG.JSを使ったオシャレなテキスト表示</h1> </body> |
HTMLのbodyの中に、SVGを描画する要素を設置します。設置する要素には任意のIDを付けてください。
今回はタイトルのテキストの代わりにSVGを描画するため、h1内に描画することにしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script> $(function(){ var titleText = $("#svgTitle").text(); //テキストを対象の要素から取得 $("#svgTitle").text(""); //SVGと入れ替えるので、対象の要素のテキストを削除 var draw = SVG('svgTitle').size( 960, 64); //SVGを描画 var image = draw.image('images/bg_image1.jpg'); //テキストの中に描画する画像を読み込む image.size(1600, 1067).y(-500); //テキストのサイズと位置を設定 // create text var text = draw.text(titleText); //テキストを設定 //テキストのフォントを設定 text.font({ size: 50, //フォントサイズ family: 'ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka', //フォントファミリー anchor: 'left', //位置 'center'でセンタリング, 'right'で右寄せ leading: 1 //ligh-height }); // clip image with text image.clipWith(text); //イメージをテキストでクリッピング // animation マウスのカーソルを合わせたり、タッチしたらアニメーションさせる draw.mouseover(function() { image.animate(2000, '<>').move(0, -750); }); draw.mouseout(function() { image.animate(2000, '<>').move(0, -500); }); draw.touchstart(function() { image.animate(2000, '<>').move(0, -750); }); draw.touchend(function() { image.animate(2000, '<>').move(0, -500); }); }); </script> |
HTMLの準備ができたら、いよいよsvg.jsの形式でJavaScriptを記述します。
サイズや位置、フォント、アニメーションのduration, easing, delay、イベントとの連動など、
SVGの基本的な知識は必要となりますが、
jQueryを記述するように、わかりやすく記述することができました。
svg.jsのファイルサイズもjQueryより軽量で、
動作も軽快なようですので、SVGを使ったサイトを制作するときに重宝しそうです。
↓詳しい使い方はこちらから確認できます。
参考サイト
svg.js を触ってみた | 黒くないすべてのものはカラスではない
Author Profile
SHARE
