electronでnpm installしたsvg.jsを使用する

 electronでsvg.jsを使用する場合、公式サイトからsvg.jsファイルを直接落としてきてもよいのですが、バージョンを管理したい都合もあり、幸いにもnpmで提供されているので、npmから導入して使用することにします。



electronとsvg.jsをインストールします。
`npm install electron`
`npm install svg.js`

起動する状態のelectronアプリケーションを作ってから、下記のような内容を追記します。

``` : ./js/index.js
'use strict';

var SVG = require('svg.js');

window.onload = function(e){
    var draw = SVG('drawing').size(300, 300)
    var rect = draw.rect(100, 100).attr({ fill: '#f06' })
}

```

``` : index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>daisy sequence - UML sequence diagram editor -</title>

        <script type="text/javascript" src="./js/index.js"></script>
    </head>
    <body>
        hello!
        <div id="drawing"></div>
    </body>
</html>

```

svg.jsは、`var SVG = require('svg.js');`でロードできます。
注意する点として、onloadの前にsvg.js機能を呼びだそうとすると、
`Uncaught TypeError: Cannot read property 'nodeName' of null`
というエラーに見舞われます。

0 件のコメント:

コメントを投稿

TIGORA(ティゴラ)のトレッキング シューズ

 TIGORA(ティゴラ)の トレッキング シューズを買いました。 メインの靴がアシックスウォーキングで街歩き用なのですが、これまではこれで高尾山などの軽い山も登っていました。 今回、靴底があまりに摩耗したこともあってアシックスウォーキングを買い替えたのですが、ついでに消耗が激...