SVG 0.4

defs 要素、g 要素、use 要素を使って星空とロケットを配置しました。

実行結果

生成されたコード

ソース

svg04.html

SVG.js ライブラリと JavaScript のソースファイルを指定します。

<script type="text/javascript" src="js/svg.min.js"></script>
<script type="text/javascript" src="js/svg04.js"></script>

実行結果のところには "svg" という id の div 要素と "code" という id の pre 要素を用意しました。中身は svg04.js の中で作って入れます。

<h2>実行結果</h2>
<div id="svg">
</div>
<h3>生成されたコード</h3>
<pre id="code" class="brush: xml; class-name: 'code'">
</pre>

svg04.js

svg 要素を実行結果の div 要素に生成し、そこに直接 polygon、rect、ellipse 要素を追加するのではなく、 def 要素、g 要素の中に追加しました。ロケットの背景として星空も追加しました。

26行目：星の数 200 を定数 max として定義。
33行目：defs 要素内に星空の g 要素を作成。
36行目：星空の背景（黒色）を rect 要素として追加。
42行目：星空の星（白色）を ellipse 要素として追加。
46行目：defs 要素内にロケットの g 要素を作成。
89行目：use 要素で星空を配置。
93行目：use 要素でロケットを配置。

window.onload = function() {
    // Generate svg element
    //<svg width="598" height="428" style="border: solid 1px lightgray">
    const width = 598;
    const height = 428;
    const max = 200;
    const size = 2;
    const xmax = width - size - 1;
    const ymax = height - size - 1;
    var draw = SVG().addTo('#svg').size(width, height).css('border', 'solid 1px lightgray');
    //<defs>
    //<g id="stars">
    var stars = draw.defs().group({id: 'stars'});
    //  <rect x="0" y="0" width="598" height="428" 
    //    fill="#000000" stroke="none"/>
    stars.rect(width, height).fill('#000000').stroke('none')
    //  <ellipse cx="?" cy="?" rx="1" ry="1" 
    //    fill="#ffffff" stroke="none"/>
    for (i = 0; i < max; i++) {
        var x = Math.floor(Math.random() * xmax + size / 2);
        var y = Math.floor(Math.random() * ymax + size / 2);
        stars.ellipse(size, size).cx(x).cy(y).fill('#ffffff').stroke('none');
    }
    //</g>
    //<g id="rocket">
    var rocket = draw.defs().group({id: 'rocket'});

    // Generate polygon, rect, ellipse elements
    //  <polygon points="92,0 22,96 162,96" 
    //    style="fill:#752424;stroke:#000000;stroke-width:2"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.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"/>
    rocket.ellipse().attr({cx: 146, cy: 220, rx: 5, ry: 6}).fill('#6e6e6e').stroke({color: '#000000', width: 2})

    //</g>
    //</defs>
    //<use xlink:href="#stars" x="0" y="0"/>
    draw.use(stars).move(0, 0);
    //<use xlink:href="#rocket" x="?" y="?"/>
    x = Math.floor((width - rocket.width()) / 2);
    y = Math.floor(height - rocket.height());
    draw.use(rocket).move(x, y);
    //</svg>
    var svgNode = document.getElementById('svg').children[0];
    var codeNode = document.getElementById('code')
    // Get generated SVG code
    var svgText = new XMLSerializer().serializeToString(svgNode);
    // Show the code with additional new lines
    codeNode.textContent = svgText.replace(/></g, '>\n<');
}

参考文献

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