今回は6月に入ったので、ふたご座の絵をアドビ社の Snap.svg ライブラリを使って描いてみました。
前回まで利用していた SVG.js とは以下の点が違います。大きな違いとしては、Snap.svg では HTML に書かれた SVG をライブラリから操作できる点でしょう。つまり、Adobe Illustrator などで作成した SVG 形式のベクトル画をそのまま利用できます。SVG.js の場合は改めてライブラリで SVG を生成する必要がありました。
| 比較項目 | SVG.js | Snap.svg |
| 特徴 | 動作が速い | 既存のSVGを扱える |
| 記法の例 | draw.ellipse().attr({cx: cx, cy:cy, rx: rx, ry: ry, fill: ‘white’}); | s.ellipse(cx, cy, rx, ry).attr({fill: ‘white’}); |
| 留意点 | Safari などのブラウザで transform の結果が変わり 表示がずれることがある。 | 今のところ特になし |
| ライセンス | MIT ライセンス | Apache 2.0 ライセンス |
| 作者 | Wout Fierens | Adobe Systems Incorporated |
今回作成したプログラムのソースと実行結果はこちら。
ふたごの絵は Adobe Illustrator で作成したものを HTML に左上に表示される状態で貼り付けたのですが、下記のコードによって中央に移動させています。
// Move g elements
var dx = 170, dy = 50;
var g = Snap.select('#Lyra');
g.transform('tlanslate(' + dx + ',' + dy + ')');
g = Snap.select('#Castor');
g.transform('tlanslate(' + dx + ',' + dy + ')');
g = Snap.select('#Pollux');
g.transform('tlanslate(' + dx + ',' + dy + ')');
のんきさんの年月記 
“JavaScript (59) Snap.svgライブラリを使用” への2件の返信