今回のロケットのオリジナルのSVGは2015年に作ったもので、ロケットが星空を飛ぶアニメーションになっています。星空とロケットをそれぞれグループとして定義していました。
今回はオリジナルと同様に、定義を表す defs 要素、グループとして図形の要素をまとめる g 要素、defs で定義したグループの表示を行う use 要素を利用するように SVG.js ライブラリでプログラムを組みました。
作成したプログラムの実行結果ソースコードはこちらです。
アニメーションはまだ作っていませんが、乱数で星の位置を決めたり、ロケットを底辺の中央に置くよう位置を計算したり、静的な SVG ではできないことも取り入れました。
生成された SVG は以下の通りです。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="598" height="428" style="border: 1px solid lightgray;">
<defs>
<g id="stars">
<rect width="598" height="428" fill="#000000" stroke="none"/>
<ellipse rx="1" ry="1" cx="202" cy="209" fill="#ffffff" stroke="none"/>
中略
<ellipse rx="1" ry="1" cx="464" cy="65" fill="#ffffff" stroke="none"/>
</g>
<g id="rocket">
<polygon points="92,0 22,96 162,96" fill="#752424" stroke-width="2" stroke="#000000"/>
<polygon points="21,194 0,273 42,273" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<polygon points="162,193 142,273 183,273" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<polygon points="93,189 52,259 134,259" fill="#1f1f1f" stroke-width="2" stroke="#000000"/>
<rect width="141" height="142" x="22" y="97" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<polygon points="93,192 73,273 114,273" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="41" ry="43" cx="93" cy="145" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="33" ry="34" cx="93" cy="145" fill="#217dbb" stroke-width="2" stroke="#000000"/>
<ellipse rx="7" ry="8" cx="37" cy="220" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="7" ry="7" cx="64" cy="221" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="6" ry="7" cx="122" cy="221" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="5" ry="6" cx="146" cy="220" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
</g>
</defs>
<use xlink:href="#stars" x="0" y="0"/>
<use xlink:href="#rocket" x="207" y="155"/>
</svg>
のんきさんの年月記 
“” への1件の返信