JavaScript (58) おうし座

今回は星座のプログラムを作ってみました。以前 Small Basic のプログラムとして作ったものを、JavaScript + SVG.js で置き換えました。プログラムの実行結果とソースコードはこちらです。

おうしの絵は Adobe Illustrator を使って作成しました。星座の情報はウィキペディアを引用し、赤経、赤緯を元に画面上の座標を計算しています。

以下のコードは SVG.js で生成した SVG コードの一部です。Adobe Illustrator で作成した SVG を拡大したり回転したりするために transform を使っています。

<use xlink:href="#taurus" x="240" y="60" transform="matrix(1.5756924048195329,0.27783708426708853,-0.27783708426708853,1.5756924048195329,-153.55851748245988,-189.65653957658486)"/>

既知の留意点

Safari や iPhone の Chrome で表示すると以下の現象が確認できます。

• おうしの絵の位置がずれています。これは Safari やモバイルのブラウザでは transform した結果がずれてしまうことが原因と思われます。前回の水族館の魚がはみ出してしまうのと同様の現象だと思います。さらによく見るとモバイルのブラウザでは生成された transform のアフィン行列の数値がデスクトップのブラウザで生成された数値とは違っていました。SVG.js がモバイルのブラウザでは正常に動作していないのかもしれません。
• モバイルのブラウザではフォントが正しく表示できません。Safari ではおうし座のマークが色付きになります。

関連項目

• JavaScript (57) 次の魚は？
• JavaScript 目次