SVG 0.2

前回は Document オブジェクトを使い、SVG のタグを生成しました。今回はオープンソースのライブラリ SVG.js を使って SVG を生成してみました。

実行結果

ソース

svg02.html

JavaScript のソースファイルを指定します。12行目には GitHub からダウンロードした svg.min.js 3.1.2 を指定しています。同じフォルダーに svg.min.js.map も必要です。 
<script type="text/javascript" src="js/svg.min.js"></script>
<script type="text/javascript" src="js/svg02.js"></script>
実行結果のところには "result" という id の div 要素を用意するだけです。 
<h2>実行結果</h2>
<div id="result">
</div>

svg02.js

svg 要素を実行結果の div 要素に生成し、そこに polygon、rect、ellipse 要素を追加します。

window.onload = function() {
    //svg 要素の生成
    //<svg width="598" height="428" style="border: solid 1px lightgray">
    var draw = SVG().addTo('#result').size('598', '428').css('border', 'solid 1px lightgray');

    //polygon、rect、ellipse 要素の生成
    //  <polygon points="92,0 22,96 162,96" 
    //    style="fill:#752424;stroke:#000000;stroke-width:2"/>
    draw.polygon('92,0 22,96 162,96').fill('#752424').stroke({color: '#000000', width: 2})
    //  <polygon points="21,194 0,273 42,273" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.polygon('21,194 0,273 42,273').fill('#6e6e6e').stroke({color: '#000000', width: 2})
    //  <polygon points="162,193 142,273 183,273" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.polygon('162,193 142,273 183,273').fill('#6e6e6e').stroke({color: '#000000', width: 2})
    //  <polygon points="93,189 52,259 134,259" 
    //    style="fill:#1f1f1f;stroke:#000000;stroke-width:2"/>
    draw.polygon('93,189 52,259 134,259').fill('#1f1f1f').stroke({color: '#000000', width: 2})
    //  <rect x="22" y="97" width="141" height="142" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.rect(141, 142).move(22, 97).fill('#6e6e6e').stroke({color: '#000000', width: 2})
    //  <polygon points="93,192 73,273 114,273" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.polygon('93,192 73,273 114,273').fill('#6e6e6e').stroke({color: '#000000', width: 2})
    //  <ellipse cx="93" cy="145" rx="41" ry="43" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.ellipse().attr({cx: 93, cy: 145, rx: 41, ry: 43}).fill('#6e6e6e').stroke({color: '#000000', width: 2})
    //  <ellipse cx="93" cy="145" rx="33" ry="34" 
    //    style="fill:#217dbb;stroke:#000000;stroke-width:2"/>
    draw.ellipse().attr({cx: 93, cy: 145, rx: 33, ry: 34}).fill('#217dbb').stroke({color: '#000000', width: 2})
    //  <ellipse cx="37" cy="220" rx="7" ry="8" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.ellipse().attr({cx: 37, cy: 220, rx: 7, ry: 8}).fill('#6e6e6e').stroke({color: '#000000', width: 2})
    //  <ellipse cx="64" cy="221" rx="7" ry="7" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.ellipse().attr({cx: 64, cy: 221, rx: 7, ry: 7}).fill('#6e6e6e').stroke({color: '#000000', width: 2})
    //  <ellipse cx="122" cy="221" rx="6" ry="7" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.ellipse().attr({cx: 122, cy: 221, rx: 6, ry: 7}).fill('#6e6e6e').stroke({color: '#000000', width: 2})
    //  <ellipse cx="146" cy="220" rx="5" ry="6" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    draw.ellipse().attr({cx: 146, cy: 220, rx: 5, ry: 6}).fill('#6e6e6e').stroke({color: '#000000', width: 2})

    //</svg>
}

参考文献

このプログラムは以下の情報またはソフトウェアを参照しています。