以前、Small Basic で水族館のプログラムを作ったことがあります。左右反転を改良して回るようにしたものです。SVG でも同じような動きを作ってみました。実行結果とソースコードはこちら。
0.4秒毎に魚の角度に応じて transform({scaleX: }) を呼び出して SVG を生成し直しているのですが、生成されたコードの use 要素を見ると transform=”matrix(…)” となっていて、アフィン変換の変換行列として表現されています。拡大縮小、回転、平行移動などの操作をまとめてアフィン変換の形で覚えているんでしょうね。
<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="640" height="400" style="border: 1px solid lightgray;">
<defs>
<g id="fish">
<rect width="30" height="10" x="0" y="5" fill-opacity="0.6" fill="royalblue" stroke-opacity="0.6" stroke-width="2" stroke="#273f87"/>
<ellipse rx="20" ry="10" cx="40" cy="10" fill="royalblue" stroke-width="2" stroke="#273f87"/>
<ellipse rx="5" ry="5" cx="50" cy="10" fill="black" stroke-width="2" stroke="white"/>
</g>
</defs>
<rect width="640" height="400" fill="#333333" stroke="none"/>
<rect width="400" height="300" x="120" y="50" fill="none" stroke-width="2" stroke="white"/>
<use xlink:href="#fish" x="237" y="181" transform="matrix(0.944,0,0,1,14.952000000000027,0)"/>
<use xlink:href="#fish" x="399" y="144" transform="matrix(-0.735,0,0,1,744.315,0)"/>
<use xlink:href="#fish" x="244" y="297" transform="matrix(-0.958,0,0,1,536.492,0)"/>
<rect width="400" height="230" x="120" y="120" fill-opacity="0.1" fill="lightseagreen" stroke="none"/>
</svg>
既知の留意点
今回のプログラムはブラウザによっては正しく動作しないという結果になりました。以下に留意点を挙げておきます。
- 以下のブラウザでは魚が水槽をはみ出して表示されます。
– Safari（Mac、iPhone とも）
– iPhone の Chrome
のんきさんの年月記 
“” への1件の返信