前回 SVG.js で生成したロケットの SVG のコードを表示するようにしてみました。プログラムと実行結果はこちら。
生成された 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;">
<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"/>
</svg>
次回はこのロケットをグループにして、動かしてみたいと思います。
のんきさんの年月記 
“JavaScript (51) 生成したSVGの表示” への1件の返信