Snap svgを使ってみる。

この記事の内容

Snap.svgを初めて使ってみた時の備忘録、チュートリアルでわかりにくかった点など。

インストール

公式からダウンロード、zipファイルを解凍、htmlで

index.html

    <script src="lib/Snap.svg-0.5.1/dist/snap.svg.js"></script>

で読み込む。npmでもインストールできるがバージョンが古い、webpackのビルドに問題があるらしいので古いこのスタイルが結局一番ラクっぽい。

トップノード(Paper)の設定

チュートリアルではSVG要素を生成する方法、セレクターで設定する方法、svgsvgelementを使う方法があるがここでは最初の方法をとる。

init_svg.js

function init_svg(){
    const can=document.getElementById('canvas');
    const w=can.clientWidth;
    const h=can.clientHeight;
    const paper=Snap(w, h).remove();
    paper.appendTo(can);
}

親要素を持ってきてその幅と高さをSVG要素にセットそれを親要素にセットしている。最後のappendToは引数側にpaper要素を子要素としてセットしている。２番目の方法を用いるとサイズがうまく設定できなかった。成功すると上が下になる。

<div id="canvavs"></div>

<div id="canvavs">
   <svg ~~~~>
      <desc>Created with Snap</desc>
      <defs></defs>
   </svg>
</div>

になる。<defs>要素には再利用できるオブジェクトを定義してくためのものでSnapではなくSVGそのもの規格として定められている。defs-MDN

線の描写と座標系

init_svg.js

    paper.line(0.1*w, 0.8*h, 0.95*w, 0.8*h).attr( { stroke:'black', strokeWidth: 2} );
    paper.line(0.1*w, 0.8*h, 0.1*w, 0.05*h).attr( { stroke:'black', strokeWidth: 2} );

出来上がったHPは

こうなる外の枠はSVG全体を囲んでいるボックスである。注意深く見てもらえるとわかるが座標系は右上が(0,0)で左下が(x,x)である普通の座標設定(右下が(0,0)で左上が(x,x))と違うので注意が必要である。

あとがき

まあ原型を見てもらえれば次にやりたいことが見えてくると思いますがとりあえずここで締めます。

• SnapはPaper(トップノード)を作るのがしんどい。
• 座標系が変。
• defsとかいう変なノードが作られる。（もしくは手でSVGを書くときは多分ここを使うと幸せになれます）