星座のプログラムを作り変えました。今回は6月の星座ということで、ふたご座です。 前回はライブラリとして SVG.js を使いましたが、今回は Snap.svg を使いました。
Snap.svg ライブラリと JavaScript のソースファイルを指定します。
<script type="text/javascript" src="js/snap.svg-min.js"></script> <script type="text/javascript" src="js/zodiac02.js"></script>
実行結果のところには "Gemini" という id の svg 要素と "code" という id の pre 要素を用意しました。 中身は zodiac02.js の中で更新、追加しています。
今回の svg 要素には Adobe Illustrator で作成したふたごの絵をそのまま貼り付けています。 Illustrator のレイヤーが g 要素として出力され、元の絵は左上に位置していて、まだ、 transform 属性が指定されていません。
<h2>実行結果</h2>
<svg id="Gemini" xmlns="http://www.w3.org/2000/svg" width="640" height="400"> <!-- viewBox="0 0 287.664 288.817" -->
<rect x="0" y="0" width="640" height="400" style="fill:#222"/>
<g id="Pollux">
<path d="m169.408,277.6c2.1-8.4,10.4-9.5,20.5-8.7s20.6,6.1,15.5,14.5c-2.1,3.5-10.6,6.4-20.6,5.1-6.7-.8-16.9-5.3-15.4-10.9h0Z" style="fill: #624e37;"/>
<ellipse cx="213.602" cy="253.685" rx="18.4" ry="7.4" transform="translate(-55.704 60.149) rotate(-14.2)" style="fill: #624e37;"/>
<path d="m230.908,245.2c-.1,3.5-1.7,6.5-5.7,8.4-6.3,2.9-18.3,5.6-28.1,4.6-7.7-.8-26.9-21.5-33.4-31.4-3.5-5.3-6.6-7.7-12.6-9.8-5.9-2.1-6.7.6-16.8,0-10.3-.6-13.5-4.2-19.4-1.1-1.8,1-3.9,1.7-3.5,3.3.7,3.1,10.5-.8,25.1,3.5,2.6.8,9.4,2.8,16.1,7.7,17.2,12.5,18.2,26.2,28.6,30.6,5.4,2.3,7.7,1.8,15.1,4.3,2.1.7,8.5,5.1,8.9,11.1.4,5.1-3.3,5.3-4.6,6.2-7.2,5.1-17,1.6-24.9-.8-10.3-3.1-5-8.6-8.4-13-5.2-6.9-22.6-17-32-24.9-8-6.6-12.4-1.9-28.4-4-9-1.2-12.9-.9-17.4-4.6-7.8-6.5-5.1-12-12.8-23.8-8.1-12.4-19.9-19.7-22-20.9-10.1-6.1-16.1-6.1-18.6-12.3-2.8-6.7,4.1-12.2.8-14.8-3-2.4-7.4-1.1-14-2.6-3.5-.8-6.6-2.4-9-4.2.067-.067.133-.133.2-.2-7-4.3-11.7-12.3-11.7-21.5,0-13.8,10.7-25,23.8-25,3.7,0,7.2.9,10.3,2.5h0c1.4.4,2.6.9,3.7,1.4,2.7,1.5,4.5,3.3,7.5,4.9,2,1,11.4,9.6,10.4,18.9-.5,5.1-1.9,9.8-2.2,10.9,1-2.4,7.8-8.7,15-12.3,15.7-7.7,28.8,18.6,49.7,12.5,6.7-1.9,11.4-4.2,27.5-9.5,6-2,9.1-5,12.1-2.8,3.4,2.6,2.1,12.2-1,16.1-3.8,4.9-9.9,2.6-32.2,9.4-16.3,4.9-10.9,4.2-18.7,2.9-9.2-1.5-19.7-6.4-25.4-9.8,5.7,5.4,16,16.6,27,29.1,6.6,7.5,13.6,7.3,19.6,9.2,10.6,3.3,17.4-2,27.5,2.2,4,1.7,9.1,7.4,14.4,13,16.2,17,29.6,32.5,35.3,32.9,7.3.5,7.6-2.9,15.9-1.6,3.9,1,8.4,1.8,8.3,5.3h0Z" style="fill: #997955;"/>
<path d="m188.608,286c-.2-1.4,1.9-8.1,2.9-10,3.4-6.5,7.6-8.3,8.3-8.4" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m182.908,261.5c0,.3-1.9,8.3-6.8,10.6-2.1,1-5.8-.7-6.9-.8" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m159.108,260.5c1.2-1.9,2.9-8.3,3-13.1.1-4.5-.2-9.1-1.2-9-.6,0-1.8,1.9-2.9,3.6-1.9,3.1-8.8,9-12.8,9" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m159.108,260.5c3.5.1,10.2.4,14.2.1,2.6-.2,7.7.9,9.7,1.5" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m146.808,251.4c2.7-.8,6.8-3.2,12.1-3.3,1.7,0,6.7-1.8,10.3,1.4,4.5,4,3.8,14.1,0,21.8" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m173.908,272.6c-.3,1.1.3,7.4,0,8.5" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m174.608,281.4c2.6-7,8.9-11.9,14.3-13.3,3.1-.8,9.3-1.1,10.9-.5" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m182.908,262.1c-.3-3.1,2.4,6.5,2.9,10.3.4,3.5,2.1,10.5,2.2,13.6" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m222.408,240.2c-.6,1.6-2.5,5.7-3,8-.5,2.4-.5,6.2-.6,8" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m206.708,242.2c-1.5,3.6-5.2,8.9-7.2,10.3-3.5,2.5-8.3,2.6-8.8,2.3" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m165.508,228.5c.8-.1,10.5-3.1,13-7.9.4-.8,1.2-2.4,1.1-3.7" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<line x1="198.108" y1="253.7" x2="200.108" y2="259.4" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m165.508,228.5c3-.9,9.1-.9,13.6-.9,3.9,0,10.8,1,12.3,2" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m180.508,217.8c.9,3.6,1,9.4.7,13-.3,4-1.6,10.2-2.4,13.4" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m190.808,229.4c.9,1.5,3.5,8.1,3.4,12.8-.1,6.3-2.3,11.4-3.4,12.6" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m178.808,244.1c2.6-1.5,11.9-5.5,20.9-3.3,2.3.6,5.3,1.1,6.9,2" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m202.208,260.1c1.5-3.9,3.4-7.1,9.6-13.5,2.5-2.6,8.1-5.1,10.2-5.5" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m206.608,242.8c1.7,1.1,5.5,3,7.6,5.5,3.1,3.7,4.4,7.5,5,9.8" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<ellipse cx="26.509" cy="131.481" rx="3.1" ry="4.7" transform="translate(-73.462 42.062) rotate(-36.79)" style="stroke: #324996; stroke-miterlimit: 10; stroke-width: 2px;"/>
<ellipse cx="43.513" cy="123.211" rx="3.1" ry="4.7" transform="translate(-68.775 56.384) rotate(-39.79)" style="stroke: #324996; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m76.608,220.2c-11.6-3.1-15.4.6-19.2-2.6-5.8-5,1.5-15.2-1.8-33.1-.5-2.5-4.1-21.3-13-22.5-4.8-.6-9.9,4-12.3,8.4-3.7,7-1.1,13.9,1.3,23.7,7.3,29.9,3.5,34.4,11,40.3,5.3,4.2,7.9,2.5,18.2,2.5,9.9-.1,10.4,2.9,17.8,1.4,6-1.2,13.2-5.3,13-9.2-.2-5-12.4-8.2-15-8.9h0Z" style="fill: #997955;"/>
<path d="m114.308,188.2c-8.9-2.6-13.5.6-22,7.7-8.8,7.3-13.8,11.6-14.3,18.4-.5,7.5,4.9,13.3,9.2,17.9,4.8,5.2,14.2,12.8,17.9,10.2,2.7-1.9-4.3-9.5-1-15.8,3-5.9,10.9-3.4,14.3-9.2,4.1-7-4.6-15.5-.5-20.9,3.8-5.1,14.2-1.6,14.8-4.1.5-2.4-9.7-1.8-18.4-4.2h0Z" style="fill: gray;"/>
<path d="m26.808,170.6c1.9-4.1,8.7-5.8,14-5.1,4.2.5,9.4,2.8,24.3,23,13.4,18.2,10.6,18.2,17.4,24.5,4.1,3.8,10.4,8.7,16.3,17.9,2.7,4.3,4.5,8,3.1,10-1.1,1.5-3.7,1.3-4.6,1.3-8.1-.6-12.7-10.3-24-22.5-4.5-4.9-11.6-12.5-22.5-19.7-6-4-8.9-4.9-13.5-9.4-2.4-2.3-13.7-13.2-10.5-20h0Z" style="fill: #624e37;"/>
<path d="m68.108,222.3c2.6-2.6,5.8-.2,10-3.3,3.4-2.5,5.5-4.3,8.2-5.1,3.4-1,4.6,1.4,6.6,3.3,2.7,2.5,6.2,5.7,6.1,10.7-.1,3.9-2.2,8.3-5.9,10-4.3,1.9-6.3.1-14.8.5-4.9.3-6.7-.4-8.7-1.6-3.9-2.3-5-11.1-1.5-14.5h0Z" style="fill: #997955;"/>
<path d="m37.608,109.5c-.6,0-1.1.2-1.5.5-.4-1.3-1.6-2.2-3-2.2-1,0-2,.5-2.5,1.3-.6-.8-1.5-1.3-2.5-1.3-1.5,0-2.7,1-3,2.3-.6-.8-1.5-1.3-2.5-1.3-1.4,0-2.5.9-3,2.1-.5-.3-1.1-.5-1.8-.5-1.8,0-3.2,1.4-3.2,3.2v.2c-.4-.2-.8-.2-1.2-.2-1.7,0-3.2,1.4-3.2,3.2v.1c-.2-.1-.4-.1-.7-.1-1.8,0-3.2,1.4-3.2,3.2,0,.3,0,.5.1.8-1.3.4-2.2,1.6-2.2,3,0,.6.1,1.1.4,1.5-1.6.2-2.8,1.5-2.8,3.1,0,.9.3,1.6.9,2.2-1,.6-1.6,1.7-1.5,2.9,0,.6.3,1.2.6,1.7-1.1.6-1.9,1.7-1.8,3.1.1,1.1.8,2.1,1.7,2.6-.4.5-.6,1-.7,1.7-.1,1.5.8,2.9,2.1,3.3-.4.6-.6,1.2-.5,2,.1,1.6,1.5,2.9,3.1,2.9-.1.3-.1.7-.1,1.1.1,1.6,1.4,2.9,3,2.9v.1c.1,1.7,1.6,3.1,3.4,2.9.7-.1,1.4-.4,1.9-.8.7-.6,1.1-1.6,1-2.6-.1-1.6-1.4-2.9-3-2.9v-.1c-.1-1.6-1.5-2.9-3.1-2.9.1-.3.1-.6.1-.9,1.2-.5,2.1-1.8,2-3.2,0-.4-.1-.8-.3-1.2.9-.6,1.4-1.7,1.3-2.8-.1-.7-.3-1.3-.7-1.8.5-.6.8-1.4.7-2.2-.1-1.6-1.3-2.8-2.8-2.9h-.1v-.1h.1c1.1-.5,1.9-1.7,1.8-3.1-.1-1.6-1.4-2.8-3-2.9-.1-.2-.2-.4-.3-.6,1.6-.2,2.8-1.5,2.8-3.1,0-.3,0-.5-.1-.8,1.3-.4,2.2-1.6,2.2-3v-.1h0c.6.6,1.5.9,2.4.9.9-.1,1.8-.5,2.3-1.2.6.8,1.6,1.3,2.7,1.2.9-.1,1.8-.5,2.3-1.2.6.8,1.6,1.3,2.7,1.2,1.6-.1,2.9-1.5,2.9-3.1.3.1.7.1,1.1.1,1.7-.1,3.1-1.6,2.9-3.4,0-.2,0-.3-.1-.4.4.1.7.2,1.1.2.7,0,1.3-.2,1.8-.6.4-.3.7-.6.9-1,1.9.4,3.4,1,4.7,1.7.3-.6.5-1.2.5-1.9.1-1.7-1.4-3-3.1-2.8h0Zm-31.9,26.7h0c0-.1,0,0,0,0Z" style="fill: #706230;"/>
<ellipse cx="10.483" cy="151.022" rx="4.2" ry="5" transform="translate(-136.252 113.786) rotate(-71.79)" style="fill: #997955;"/>
</g>
<g id="Castor">
<ellipse cx="270.907" cy="185.807" rx="18.4" ry="7.4" transform="translate(-54.707 142.331) rotate(-26.84)" style="fill: #624e37;"/>
<path d="m263.408,212.1c1.1,3.9-7.7,9.6-17.3,11.4s-19.9,2.2-20.9-1.7,7.2-9.7,16.9-12.4,20.2-1.2,21.3,2.7h0Z" style="fill: #624e37;"/>
<polygon points="123.708 0 151.808 33.1 157.608 24.8 232.908 74.1 238.608 91.2 261.808 106.8 256.708 88.6 275.808 88.6 252.608 70.4 233.808 69.3 160.508 20.7 165.008 14.3 123.708 0" style="fill: #624e37;"/>
<path d="m287.108,172.9c-2-3.9-11.6-3.1-21.5,1.9-.6.3-1.2.6-1.8,1l-45.6-42.5-2.6-3.4-1.6-.2-42.4,17.9-43.3-41-.5-.9.6-.7,34.3-8,3.3-1.7,34.7-26.5,3-1.9c6.9-1.2,11.4-9,10.2-17.6-1.2-8.8-8-15-15.1-14s-11.9,8.9-10.6,17.7c.1.4.1.7.2,1.1l-32.3,22.6-47.2,10h-.1c-5.6.7-13,4.3-18.5,8.6.2-1.3.5-2.8.2-4.1-.5-2.7-1.7-5.6-3.3-8.6-1.6-4.6-4.7-8.9-9.1-12h-.1c-.8-.6-1.6-1.1-2.5-1.6-12.1-6.7-27.5-3.2-34.2,7.9-2.3,3.7-3.3,7.8-3.2,11.9,0,.4-.1.8-.1,1.3v.9c0,1,.2,2.1.3,3.1.4,2.1,1,4.1,1.9,5.9,4.2,8.8,13.7,15.3,24.7,16.1,4.5.3,8.8-1.1,12.6-3-2.1,5.6-2.4,11.2-1,15.8,0,.1.1.2.1.4v1.5l.2,1.9.2,1.3,16.3,48.4.8,1.8,1.2,1.2,1.1,1.1c1,.6,2.1,1.1,3.3,1.3l5.7-.2,35.6-1.2c2.1,1.1,4.6,1.7,7.2,1.7,0,0,.8.7,1.2.7.3,0,2,.6,2.3.6h2.7l5.1-.2,35.6-15.1,27.4,42.2c0,.2,0,.4.1.7.8,4.3,10.3,6.1,21.2,4,10.8-2.1,19-7.3,18.1-11.7-.8-4.3-10.3-6.1-21.2-4-.4.1-.9.2-1.3.3l-32.1-49.5,3.9-1.8,40.1,37.4.2-.2c2.2,3.7,11.7,2.8,21.4-2.1,9.8-5.3,16.2-12.5,14.2-16.5h0Zm-176.1-2.6l-2.5.1-.8-3-5-17.4,24.4,19.8-16.1.5h0Z" style="fill: #a4825b;"/>
<path d="m279.408,170.5c-.9,1.1-3,3.8-3.2,8.3-.1,2.6,1.1,7,1.6,8.3" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m263.808,175.8c-.4,5-2.6,9.5-5.5,11.7-1.8,1.3-7.1,2.9-8.2,2.9" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m226.108,168c.4,0,8.6-2.2,12-7.1,1.6-2.3,2.9-5.2,2.9-6.4" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<line x1="257.908" y1="188.8" x2="260.408" y2="194.5" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m241.208,155.7c.4,2.4,1.5,7,1.3,10.3-.3,5.3-2,10.4-3.2,13.5" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m226.908,168c2.8-1.9,11.1-4.9,19.2-4.2,1.9.2,5,1.8,6.5,2.3" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m239.408,179.5c.8-.8,8.6-3.2,13.3-3.8,1.3-.2,9.6-1.1,11.2.1" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m252.008,166.1c1,1.9,3.6,7.6,2.2,14.7-.8,4-2.8,7.9-4.1,9.6" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m261.708,194.7c.3-3,1.6-10.2,7.3-16.6,3.1-3.5,7.4-5.6,9.8-6.8" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m263.808,175.8c1.7.8,6,2,8.2,4,3.2,2.8,5.1,5.9,6.1,7.9" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m255.208,204.8c-1,1.4-3,4.5-3.8,7.2-.7,2.1-1.2,5.8-1.3,7.2" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m239.408,205.4c-.4,4.5-5.1,7.6-8.9,9.3-3,1.4-7.4.8-8.1.4" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m203.708,187.1c5.8,1.3,11.5-1.6,14.4-4,1.8-1.5,3-4.2,2.9-6" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<line x1="230.208" y1="215.5" x2="231.508" y2="222.8" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m231.508,222.8c1-2.4,5.5-8.5,11.3-12.3,2.9-1.9,10.4-4.6,12.4-5.1" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m240.008,206c1.3.9,5,2.3,6.5,4.3,3.1,4.2,3.7,8.6,3.8,10.6" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m221.108,178.1c.1,2.3.9,9.1.1,12.5-1.4,5.6-5,10.5-6.8,12.8" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m203.708,187.1c7.1.2,14.6.9,20.9,2.8,2,.6,5.5,2,7,2.8" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m214.308,203.5c.7-.5,9.9-2.7,17.6-1.1,2.4.5,6.3,2.2,7.4,3.6" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<path d="m230.908,192.1c.4,1.8.9,7.7-1.5,13.5-2,4.8-5.3,9.4-6.9,10.6" style="fill: none; stroke: #624e37; stroke-miterlimit: 10; stroke-width: 2px;"/>
<ellipse cx="87.25" cy="81.342" rx="5" ry="4.2" transform="translate(-16.523 140.166) rotate(-72.54)" style="fill: #a4825b;"/>
<path d="m70.408,90c1.1,3.2.5,6.3-1.4,7s-4.3-1.4-5.4-4.6c-.2-.4-.3-.9-.4-1.3,1.2,2.5,3.2,3.9,4.9,3.4s2.3-2.9,1.7-5.6c.3.2.5.6.6,1.1Z"/>
<path d="m53.508,95.1c.9,3.3.1,6.3-1.8,6.9s-4.2-1.7-5.1-5c-.1-.4-.2-.9-.3-1.3,1.1,2.5,3,4.1,4.6,3.7s2.5-2.8,2.1-5.5c.3.3.4.8.5,1.2Z"/>
<path d="m81.508,69.9c.3-.6.5-1.3.5-2.1,0-2.7-2.2-4.8-4.8-4.8-.8,0-1.6.2-2.3.6-.6-2-2.4-3.4-4.6-3.4-.8,0-1.5.2-2.1.5-.6-2-2.4-3.5-4.6-3.5s-3.9,1.3-4.5,3.2c-.8-.7-2-1.2-3.2-1.2-2.2,0-4.1,1.5-4.6,3.5-.7-.4-1.6-.7-2.5-.7-2.7,0-4.8,2.2-4.8,4.8v.1c-.3-.1-.5-.1-.8-.1-2.7,0-4.8,2.2-4.8,4.8v.6c-1.5.8-2.4,2.4-2.4,4.2,0,1,.3,1.9.8,2.7-1.4.8-2.4,2.4-2.4,4.2,0,1.1.4,2.1,1,2.9-.6.8-1,1.8-1,2.9,0,1.6.8,3.1,2,3.9-.3.6-.4,1.3-.4,2,0,2.6,2.1,4.8,4.7,4.8-1-1.8-1.7-3.8-2.1-5.9-.2-1-.3-2-.3-3.1v-.9c0-.7,0-1.3.1-2,.1-1.2.3-2.5.5-3.7.2-1.1.5-2.1.9-3.2.3-.8.6-1.6,1-2.4v-.1.1c.1.9.5,1.7,1.1,2.3.5.6,1.2,1.1,2,1.4.5.2,1.1.3,1.7.3,1.8,0,3.4-1,4.2-2.5.8.6,1.8,1,3,1,2.1,0,3.8-1.3,4.5-3.2.7.4,1.5.6,2.3.6,2.4,0,4.4-1.8,4.8-4,.2,0,.5.1.7.1,1.6,0,2.9-.7,3.8-1.9.7,1.7,2.4,2.9,4.4,2.9,1,0,1.9-.3,2.7-.8.1,2.6,2.2,4.6,4.8,4.6,1.5,0,2.9-.7,3.8-1.8.7-.8,1-1.9,1-3-.1-2.3-1.8-4.3-4.1-4.7Zm-3.5.7h0c0-.1.1-.1,0,0,.1,0,0,0,0,0h0Z" style="fill: #827138;"/>
<path d="m137.208,113.9c-2.5.8,5,6.6,1.5,19.2-3.9,14.2-13.2,15.8-13.8,27.6-.5,9.6,5.2,16.9,7.2,19.4,7.4,9.5,20.4,15.5,24,12.3,4.4-4-8.5-19.2-2.6-26.6,4-5,12.3-1,19.4-8.2,2.7-2.7,1.8-3.6,5.6-8.7,5.9-7.8,11.8-7.8,11.3-8.8-.7-1.3-10.3,3.5-19.9,2.2-17.5-2.4-28.4-29.8-32.7-28.4h0Z" style="fill: #878787;"/>
</g>
<g id="Lyra">
<path d="m144.308,166.8c2.4-.9,10.1-3.7,15.3-11.6,6.6-9.9,4.7-20.7,4-23.7-.3-1.3-3.6-14.7-15.4-21.1-13.6-7.3-25.8,1.4-35.4-7.8-3.8-3.7-5-8.1-5.9-7.7-1.3.5-1.3,11.4,4.7,17.4,9.6,9.5,26.2-1,32.9,7.2,4.9,5.9,2.4,19-5.7,25.8-6.7,5.7-17.9,7.6-23.5,2.6-3.9-3.4-4.3-9.5-4.4-10.7-.4-5.2,1.8-6.7,1.3-12.3-.1-1.5-.6-5.8-3.6-9.8-4.5-5.9-12.6-7.8-13.5-6.6-.7,1,4,2.9,6.5,8.6,3.1,6.8-.5,10.6.4,20.3.2,2.7,1.1,10.8,6.7,18.4,1.5,1.9,7.1,9.2,17.5,11.9,8.1,2.1,14.9.3,18.1-.9h0Z" style="fill: #624e37;"/>
<rect x="83.184" y="117.731" width="61.4" height="4.4" transform="translate(-51.448 115.655) rotate(-45)" style="fill: #624e37;"/>
<path d="m133.508,153.4l16.2-16.2c.8-.8,2-.8,2.8,0l.3.3c.8.8.8,2,0,2.8l-16.2,16.2c-.8.8-2,.8-2.8,0l-.3-.3c-.8-.8-.8-2.1,0-2.8Z" style="fill: #876c4c;"/>
<line x1="110.908" y1="123.4" x2="138.308" y2="152" style="fill: none; stroke: #b0b0b0; stroke-miterlimit: 10;"/>
<line x1="119.308" y1="114.7" x2="147.508" y2="142.7" style="fill: none; stroke: #b0b0b0; stroke-miterlimit: 10;"/>
<line x1="114.608" y1="119.2" x2="143.208" y2="147.1" style="fill: none; stroke: #b0b0b0; stroke-miterlimit: 10;"/>
<circle cx="143.208" cy="146.8" r="1.5" style="fill: #a6855e;"/>
<circle cx="147.508" cy="142.5" r="1.5" style="fill: #a6855e;"/>
<circle cx="138.308" cy="151.6" r="1.5" style="fill: #a6855e;"/>
<circle cx="119.308" cy="114.7" r="1.5" style="fill: #a6855e;"/>
<circle cx="110.408" cy="123.4" r="1.5" style="fill: #a6855e;"/>
<circle cx="114.608" cy="119.2" r="1.5" style="fill: #a6855e;"/>
<path d="m139.408,183.5c-6.1,3.8-13.2,4.9-21.9,3.4-3.7-.7-4.3-5.2-3.6-8.6.3-1.2,1.1-2.7,8.1-6.2,4.4-2.2,6.7-2.9,10.7-4.5,10.5-4.3,13.1-7.1,15.7-5.5l-11.5,9.3,14.1-4.5c.2,1.5.2,2.8.2,3-.4,6.5-6.6,10.4-11.8,13.6Z" style="fill: #a4825b;"/>
</g>
</svg>
<h3>生成されたコード</h3>
<pre id="code" class="brush: xml; class-name: 'code'">
</pre>
ふたご座の星座を表示するプログラムです。 元々 HTML に記載されていたふたごの絵を移動し、座標や星座を重ねています。
var width = 640;
var height = 400;
var s;
/* Initialize stars in Gemini
* return star[] - array of stars
* index: Flamsteed designation
* RA (Right ascension), Dec (Declination), Mag (Apparent magnitude)
*/
var star = {};
star[78] = {name: 'Pollux', ra: '07 45 19.36', dec: '+28 01 34.7', mag: 1.16};
star[66] = {name: 'Castor A', ra: '07 34 36.00', dec: '+31 53 19.1', mag: 1.90};
star[24] = {name: 'γ Gem', ra: '06 37 42.70', dec: '+16 23 57.9', mag: 1.93};
star[13] = {name: 'μ Gem', ra: '06 22 57.59', dec: '+22 30 49.9', mag: 2.87};
// star[66] = {name: 'Castor B', ra: '07 34 36.00', dec: '+31 53 19.0', mag: 2.88};
star[27] = {name: 'ε Gem', ra: '06 43 55.93', dec: '+25 07 52.2', mag: 3.06};
star[7] = {name: 'η Gem', ra: '06 14 52.70', dec: '+22 30 24.6', mag: 3.31};
star[31] = {name: 'ξ Gem', ra: '06 45 17.43', dec: '+12 53 45.8', mag: 3.35};
star[55] = {name: 'δ Gem', ra: '07 20 07.39', dec: '+21 58 56.4', mag: 3.50};
star[77] = {name: 'κ Gem', ra: '07 44 26.87', dec: '+24 23 53.3', mag: 3.57};
star[54] = {name: 'λ Gem', ra: '07 18 05.61', dec: '+16 32 25.7', mag: 3.58};
star[34] = {name: 'θ Gem', ra: '06 52 47.34', dec: '+33 57 40.9', mag: 3.60};
star[60] = {name: 'ι Gem', ra: '07 25 43.68', dec: '+27 47 53.8', mag: 3.78};
star[43] = {name: 'ζ Gem', ra: '07 04 06.54', dec: '+20 34 13.1', mag: 4.01};
star[69] = {name: 'υ Gem', ra: '07 35 55.37', dec: '+26 53 45.6', mag: 4.06};
star[18] = {name: 'ν Gem B', ra: '06 28 53.70', dec: '+20 14 20.0', mag: 8.00};
star[1] = {name: '1 Gem', ra: '06 04 07.22', dec: '+23 15 49.1', mag: 4.16};
star[62] = {name: 'ρ Gem', ra: '07 29 06.61', dec: '+31 47 02.7', mag: 4.16};
star[75] = {name: 'σ Gem', ra: '07 43 18.69', dec: '+28 53 02.7', mag: 4.23};
star[46] = {name: 'τ Gem', ra: '07 11 08.39', dec: '+30 14 43.0', mag: 4.41};
star[30] = {name: '30 Gem', ra: '06 43 59.29', dec: '+13 13 41.3', mag: 4.49};
star[38] = {name: '38 Gem', ra: '06 54 38.59', dec: '+13 10 40.9', mag: 4.71};
star[71] = {name: 'ο Gem', ra: '07 39 09.96', dec: '+34 35 04.7', mag: 4.89};
star[81] = {name: '81 Gem', ra: '07 46 07.49', dec: '+18 30 36.6', mag: 4.89};
star[83] = {name: 'φ Gem', ra: '07 53 29.84', dec: '+26 45 57.1', mag: 4.97};
star[65] = {name: '65 Gem', ra: '07 29 48.78', dec: '+27 54 58.3', mag: 5.01};
star[57] = {name: '57 Gem', ra: '07 23 28.55', dec: '+25 03 02.2', mag: 5.04};
star[74] = {name: '74 Gem', ra: '07 39 28.59', dec: '+17 40 28.3', mag: 5.04};
star[51] = {name: '51 Gem', ra: '07 13 22.27', dec: '+16 09 32.6', mag: 5.07};
star[64] = {name: '64 Gem', ra: '07 29 20.46', dec: '+28 07 06.3', mag: 5.07};
star[56] = {name: '56 Gem', ra: '07 21 56.90', dec: '+20 26 37.4', mag: 5.09};
star[80] = {name: 'π Gem', ra: '07 47 30.34', dec: '+33 24 56.8', mag: 5.14};
star[26] = {name: '26 Gem', ra: '06 42 24.32', dec: '+17 38 43.9', mag: 5.20};
star[42] = {name: 'ω Gem', ra: '07 02 24.78', dec: '+24 12 55.6', mag: 5.20};
star[63] = {name: '63 Gem', ra: '07 27 44.39', dec: '+21 26 44.0', mag: 5.20};
star[68] = {name: '68 Gem', ra: '07 33 36.50', dec: '+15 49 36.1', mag: 5.27};
star[36] = {name: '36 Gem', ra: '06 51 33.05', dec: '+21 45 40.4', mag: 5.28};
star[76] = {name: '76 Gem', ra: '07 44 06.92', dec: '+25 47 03.2', mag: 5.30};
star[85] = {name: '85 Gem', ra: '07 55 39.90', dec: '+19 53 02.6', mag: 5.38};
star[28] = {name: '28 Gem', ra: '06 44 45.46', dec: '+28 58 15.6', mag: 5.42};
star[45] = {name: '45 Gem', ra: '07 08 22.04', dec: '+15 55 51.3', mag: 5.47};
star[70] = {name: '70 Gem', ra: '07 38 32.84', dec: '+35 02 54.5', mag: 5.58};
star[35] = {name: '35 Gem', ra: '06 50 25.50', dec: '+13 24 47.5', mag: 5.68};
star[41] = {name: '41 Gem', ra: '07 00 15.82', dec: '+16 04 44.4', mag: 5.73};
star[37] = {name: '37 Gem', ra: '06 55 18.69', dec: '+25 22 32.3', mag: 5.73};
star[3] = {name: '3 Gem', ra: '06 09 43.99', dec: '+23 06 48.5', mag: 5.75};
star[47] = {name: '47 Gem', ra: '07 11 23.08', dec: '+26 51 24.0', mag: 5.75};
star[53] = {name: '53 Gem', ra: '07 15 57.18', dec: '+27 53 50.7', mag: 5.75};
star[59] = {name: '59 Gem', ra: '07 24 33.44', dec: '+27 38 16.1', mag: 5.77};
star[5] = {name: '5 Gem', ra: '06 11 32.31', dec: '+24 25 13.4', mag: 5.83};
star[52] = {name: '52 Gem', ra: '07 14 41.94', dec: '+24 53 06.7', mag: 5.84};
star[48] = {name: '48 Gem', ra: '07 12 26.39', dec: '+24 07 43.3', mag: 5.85};
star[33] = {name: '33 Gem', ra: '06 49 49.85', dec: '+16 12 10.5', mag: 5.85};
star[61] = {name: '61 Gem', ra: '07 26 56.33', dec: '+20 15 27.3', mag: 5.94};
star[44] = {name: '44 Gem', ra: '07 05 18.37', dec: '+22 38 14.9', mag: 6.00};
star[8] = {name: '8 Gem', ra: '06 16 19.05', dec: '+23 58 12.2', mag: 6.09};
star[58] = {name: '58 Gem', ra: '07 23 28.15', dec: '+22 56 43.6', mag: 6.17};
star[82] = {name: '82 Gem', ra: '07 48 33.65', dec: '+23 08 27.5', mag: 6.18};
star[39] = {name: '39 Gem', ra: '06 58 47.52', dec: '+26 04 51.1', mag: 6.20};
star[16] = {name: '16 Gem', ra: '06 27 56.69', dec: '+20 29 46.6', mag: 6.22};
star[9] = {name: '9 Gem', ra: '06 16 58.71', dec: '+23 44 27.3', mag: 6.24};
star[20] = {name: '20 Gem', ra: '06 32 18.52', dec: '+17 47 03.4', mag: 6.26};
star[141] = {name: '141 Tau', ra: '06 01 41.63', dec: '+22 24 03.8', mag: 6.36};
star[19] = {name: '19 Gem', ra: '06 31 37.44', dec: '+15 54 12.7', mag: 6.38};
star[40] = {name: '40 Gem', ra: '06 59 27.94', dec: '+25 54 51.1', mag: 6.40};
star[25] = {name: '25 Gem', ra: '06 41 20.90', dec: '+28 11 47.9', mag: 6.45};
star[50] = {name: '50 Gem', ra: '07 12 49.08', dec: '+27 13 30.2', mag: 6.46};
star[32] = {name: '32 Gem', ra: '06 45 54.20', dec: '+12 41 36.8', mag: 6.47};
star[6] = {name: '6 Gem', ra: '06 12 19.10', dec: '+22 54 30.7', mag: 6.51};
star[79] = {name: '79 Gem', ra: '07 45 09.34', dec: '+20 18 57.8', mag: 6.53};
star[15] = {name: '15 Gem B', ra: '06 27 45.94', dec: '+20 46 59.6', mag: 8.59};
star[10] = {name: '10 Gem', ra: '06 18 54.43', dec: '+23 36 11.9', mag: 6.58};
star[2] = {name: '2 Gem', ra: '06 06 48.66', dec: '+23 38 19.0', mag: 6.67};
star[23] = {name: '23 Gem', ra: '06 36 02.12', dec: '+16 47 49.5', mag: 6.73};
star[4] = {name: '4 Gem', ra: '06 10 29.94', dec: '+22 59 52.4', mag: 6.88};
star[11] = {name: '11 Gem', ra: '06 19 19.30', dec: '+23 28 09.9', mag: 6.91};
star[12] = {name: '12 Gem', ra: '06 19 22.52', dec: '+23 16 28.2', mag: 6.95};
star[49] = {name: '49 Gem', ra: '07 12 49.38', dec: '+25 44 55.3', mag: 7.05};
var edge = [[66, 46], [46, 27], [27, 13], [13, 7], [66, 78], [78, 55], [55, 43],
[43, 24]];
var offsetX;
var offsetY;
var wrap = true;
var decMin;
var decMax;
var raMin = 0;
var raMax;
var xMin;
var xMax;
var yMin;
var yMax;
/**
* drawGrids function
* @since 0.1
*/
const drawGrids = function() {
dec = 0;
y1 = 0;
y2 = height;
for (ra = raMin; ra <= raMax; ra++) {
xy = raDec2xy(String(ra), String(dec));
s.line(xy[0], y1, xy[0], y2).attr({stroke: 'dimgray', width: 1});
raTxt = ra;
if (wrap & (raTxt < 0)) {
raTxt += 24;
}
s.text(xy[0], 5 + 12, raTxt + 'h').attr({fill: 'dimgray', 'font-size': 12});
}
x1 = 0;
x2 = width;
for (dec = decMin; dec <= decMax + 10; dec += 10) {
if (dec > 0) {
strDec = '+' + dec;
} else {
strDec = String(dec);
}
xy = raDec2xy(String(ra), strDec);
s.line(x1, xy[1], x2, xy[1]).attr({stroke: 'dimgray', width: 1});
s.text(x1, xy[1] + 12, strDec).attr({fill: 'dimgray', 'font-size': 12});
}
}
/**
* getMinMax function - Get minimum and maximum coordinates
* @since 0.1
* return decMin - minimum declination
* return decMax - maximum declination
* return raMin - minimum right ascension
* return raMax - maximum right ascension
* return xMin - minimum x coordinate
* return xMax - maximum x coordinate
* return yMin - minimum y coordinate
* return yMax - maximum y coordinate
*/
const getMinMax = function() {
first = true;
Object.keys(star).forEach(function(key) {
ra = star[key].ra;
dec = star[key].dec;
xy = raDec2xy(ra, dec);
ra1 = Number(ra.substring(0, 2));
if (wrap & (12 < ra1)) {
ra1 -= 24;
}
if (first) {
raMin = ra1;
decMin = Number(dec.substring(0, 3));
raMax = ra1;
decMax = Number(dec.substring(0, 3));
xMin = xy[0];
yMin = xy[1];
xMax = xy[0];
yMax = xy[1];
first = false;
} else {
raMin = Math.min(ra1, raMin);
decMin = Math.min(dec.substring(0, 3), decMin);
raMax = Math.max(ra1, raMax);
decMax = Math.max(dec.substring(0, 3), decMax);
xMin = Math.min(xy[0], xMin);
yMin = Math.min(xy[1], yMin);
xMax = Math.max(xy[0], xMax);
yMax = Math.max(xy[1], yMax);
}
});
decMin = Math.floor(decMin / 10) * 10;
raMax = raMax + 1;
decMax = decMax + 1;
}
/**
* raDec2xy function - Convert ra, dec to x, y
* @since 0.1
* @param ra - right ascension
* @param dec - declination
* @return [x, y] - coordinates in graphics window
*/
const raDec2xy = function(ra, dec) {
var x = Number(ra.substring(0, 2));
if (wrap & (12 < x)) {
x -= 24;
}
x = x + ra.substring(3, 5) / 60.;
x = x + ra.substring(6, 11) / 3600.;
x = offsetX - (x - raMin) * 3600. / 24.;
var y = Number(dec.substring(1, 3));
y = y + dec.substring(4, 6) / 60.;
y = y + dec.substring(7, 12) / 3600.;
y = y * (dec.substring(0, 1) + '1');
y = offsetY - y * 3600. / 360.;
return [x, y];
}
/**
* onload function
* @since 0.1
*/
window.onload = function() {
// Get svg element
s = Snap('#Gemini');
// Move g elements
var dx = 170, dy = 50;
var g = Snap.select('#Lyra');
g.transform('tlanslate(' + dx + ',' + dy + ')');
g = Snap.select('#Castor');
g.transform('tlanslate(' + dx + ',' + dy + ')');
g = Snap.select('#Pollux');
g.transform('tlanslate(' + dx + ',' + dy + ')');
// Get parameters from the zodiac
offsetX = 0;
offsetY = 0;
getMinMax();
offsetX = -xMin - 440;
offsetY = -yMin + 100;
drawGrids();
// Draw edges in the zodiac
for (i = 0; i < edge.length; i++) {
e = edge[i];
ra = star[e[0]].ra;
dec = star[e[0]].dec;
xy = raDec2xy(ra, dec);
x1 = xy[0];
y1 = xy[1];
ra = star[e[1]].ra;
dec = star[e[1]].dec;
xy = raDec2xy(ra, dec);
x2 = xy[0];
y2 = xy[1];
//<line x1="" y1="" x2="" y2="" stroke="darkgray"/>
s.line(x1, y1, x2, y2).attr({stroke: 'darkgray', width: 1});
}
// Draw stars in the zodiac
Object.keys(star).forEach(function(key) {
ra = star[key].ra;
dec = star[key].dec;
xy = raDec2xy(ra, dec);
cx = xy[0];
cy = xy[1];
mag = star[key].mag;
r = 6 / mag;
//<ellipse cx="" cy="" rx="" ry="" fill="white"/>
s.ellipse(cx, cy, r, r).attr({fill: 'white'});
});
//<text transform="matrix(1 0 0 1 70 230)" class="st0 st1 st2">Gemini</text>
s.text(70, 230 + 32, 'Gemini').attr({fill: 'white', 'font-family': 'Curlz MT', 'font-size': 32});
//<text transform="matrix(1 0 0 1 70 270)" class="st0 st3 st4">♉</text>
s.text(70, 270 + 96, '♊').attr({fill: 'white', 'font-family': 'Segoe UI Symbol', 'font-size': 96});
// Get generated SVG code
var svgText = s.toString();
// Show the code with additional new lines
var codeNode = document.getElementById('code');
codeNode.textContent = svgText.replace(/><([^/])/g, '>\n<$1');
}
このプログラムは以下の情報またはソフトウェアを参照しています。
