魚を入れ換えてみました。 ブラウザの再読み込みボタンで魚の位置を変えられます。
<script type="text/javascript" src="js/svg.min.js"></script> <script type="text/javascript" src="js/aquarium02.js"></script>実行結果のところには "svg" という id の div 要素と "code" という id の pre 要素を用意しました。中身は aquarium02.js の中で作って入れます。
<h2>実行結果</h2> <div id="svg"> </div> <h3>生成されたコード</h3> <pre id="code" class="brush: xml; class-name: 'code'"> </pre>
今回は魚の形を入れ換えました。前回と魚の向きが逆なので scaleX の符号を逆にしました。
const width = 400; // of fish tank
const height = 300; //
const depth = 230; //
var x; //
var y; //
const delay = 400; // [ms]
const max = 3;
var draw; // SVG
var fish; // fish
var a = [max]; // angle
var da = [max]; // delta angle
var use = [max]; // for fish
var fy = [max];
/**
* moveFish function
* @since 0.1
*/
const moveFish = function() {
for (i = 0; i < max; i++) {
a[i] += da[i];
if (a[i] > 2 * Math.PI) {
a[i] -= 2 * Math.PI;
}
_x = x + Math.round((width * 0.4) * Math.cos(a[i])) + width * 0.5;
use[i].move(_x - fish.width() / 2, fy[i] - fish.height() / 2);
use[i].transform({scaleX: Math.round(Math.sin(a[i]) * 1000) / 1000});
}
}
/**
* onload function
* @since 0.2
*/
window.onload = function() {
// Generate svg element
//<svg width="640" height="400" style="background-color: #333; border: solid 1px lightgray">
draw = SVG().addTo('#svg').size(640, 400).css('border', 'solid 1px lightgray');
//<defs>
//<g id="fish">
fish = draw.defs().group({id: 'fish'});
// <polygon class="st1" points="117.1,5.7 117.8,8.3 119.1,11.8 121.2,14.5 121.2,16.7 121.7,19.7 122.9,22.4 122,25.3 121.5,27.7
// 122.2,30.1 121.1,31.6 120.6,32.8 120.5,34.8 99,24.6 99,18.8"/>
fish.polygon('117.1,5.7 117.8,8.3 119.1,11.8 121.2,14.5 121.2,16.7 121.7,19.7 122.9,22.4 122,25.3 121.5,27.7 122.2,30.1 121.1,31.6 120.6,32.8 120.5,34.8 99,24.6 99,18.8').attr({width: 2, fill:'#fff', stroke: '#333'});
// <line class="st2" x1="100.1" y1="19.7" x2="121.2" y2="13.7"/>
fish.line('100.1,19.7 121.2,13.7').attr({width: 2, stroke: '#333'});
// <line class="st2" x1="100.1" y1="21.3" x2="122.9" y2="22.4"/>
fish.line('100.1,21.3 122.9,22.4').attr({width: 2, stroke: '#333'});
// <line class="st2" x1="100" y1="23.3" x2="122.2" y2="30.1"/>
fish.line('100,23.3 122.2,30.1').attr({width: 2, stroke: '#333'});
// <path class="st1" d="M89.1,21.1c0-1.7-0.1-2,1.5-5.9c0,0,1.5-3.3,3.2-4.2c0.5-0.3,0.7-0.2,0.8-0.2c0.3,0.1-0.1,0.7-0.2,0.9
// c-0.8,1.3-2.6,5.3-2.7,5.6C91,20,91.3,24,92.9,27c0,0,1.5,2.1,2.8,3.7c0.1,0.1,0.5,0.7,0.2,0.8c-0.2,0.1-0.5,0-0.6-0.1
// c-0.5-0.2-4-1.8-5.5-6.6C89.5,24.1,89.1,22.7,89.1,21.1L89.1,21.1L89.1,21.1z"/>
fish.path('M89.1,21.1c0-1.7-0.1-2,1.5-5.9c0,0,1.5-3.3,3.2-4.2c0.5-0.3,0.7-0.2,0.8-0.2c0.3,0.1-0.1,0.7-0.2,0.9c-0.8,1.3-2.6,5.3-2.7,5.6C91,20,91.3,24,92.9,27c0,0,1.5,2.1,2.8,3.7c0.1,0.1,0.5,0.7,0.2,0.8c-0.2,0.1-0.5,0-0.6-0.1c-0.5-0.2-4-1.8-5.5-6.6C89.5,24.1,89.1,22.7,89.1,21.1L89.1,21.1L89.1,21.1z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M77.2,21c0-2.4-0.1-2.8,2.1-8.3c0,0,2.1-4.6,4.4-5.9c0.6-0.4,0.9-0.3,1.1-0.3c0.5,0.2-0.2,1-0.3,1.2
// c-1.1,1.9-3.6,7.4-3.7,7.9c-1,3.9-0.6,9.5,1.7,13.7c0,0,2.1,3,3.9,5.2c0.1,0.2,0.7,0.9,0.2,1.1c-0.3,0.1-0.7,0-0.9-0.1
// c-0.6-0.2-5.5-2.5-7.6-9.2C77.7,25.3,77.2,23.4,77.2,21L77.2,21L77.2,21z"/>
fish.path('M77.2,21c0-2.4-0.1-2.8,2.1-8.3c0,0,2.1-4.6,4.4-5.9c0.6-0.4,0.9-0.3,1.1-0.3c0.5,0.2-0.2,1-0.3,1.2c-1.1,1.9-3.6,7.4-3.7,7.9c-1,3.9-0.6,9.5,1.7,13.7c0,0,2.1,3,3.9,5.2c0.1,0.2,0.7,0.9,0.2,1.1c-0.3,0.1-0.7,0-0.9-0.1c-0.6-0.2-5.5-2.5-7.6-9.2C77.7,25.3,77.2,23.4,77.2,21L77.2,21L77.2,21z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M65.2,21c0-3.2-0.2-3.7,2.8-11.2c0,0,2.9-6.2,5.8-8c0.8-0.5,1.2-0.5,1.4-0.4c0.6,0.2-0.2,1.3-0.4,1.7
// c-1.5,2.6-4.8,10-4.9,10.7C68.5,19.1,69,26.6,72,32.3c0,0,2.8,4,5.1,7c0.2,0.3,0.9,1.3,0.3,1.5c-0.4,0.2-1,0-1.1-0.1
// c-0.9-0.3-7.2-3.3-10-12.4C65.8,26.8,65.2,24.2,65.2,21L65.2,21L65.2,21z"/>
fish.path('M65.2,21c0-3.2-0.2-3.7,2.8-11.2c0,0,2.9-6.2,5.8-8c0.8-0.5,1.2-0.5,1.4-0.4c0.6,0.2-0.2,1.3-0.4,1.7c-1.5,2.6-4.8,10-4.9,10.7C68.5,19.1,69,26.6,72,32.3c0,0,2.8,4,5.1,7c0.2,0.3,0.9,1.3,0.3,1.5c-0.4,0.2-1,0-1.1-0.1c-0.9-0.3-7.2-3.3-10-12.4C65.8,26.8,65.2,24.2,65.2,21L65.2,21L65.2,21z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M53.2,23.2c-0.3-3.7-0.6-4.2,1.7-12.9c0,0,2.2-7.3,5-9.6C60.7-0.1,61.1,0,61.3,0c0.6,0.2-0.1,1.5-0.2,1.9
// c-1.3,3.1-3.8,11.8-3.9,12.6c-0.6,4.6,1.3,16.2,3.9,20.8c0,0,3.1,4.3,5.8,7.5c0.2,0.3,1.1,1.3,0.5,1.7c-0.4,0.2-0.9,0.1-1.2,0
// c-0.9-0.3-7.5-3.2-11.1-13.2C54.4,29.7,53.5,26.8,53.2,23.2L53.2,23.2L53.2,23.2z"/>
fish.path('M53.2,23.2c-0.3-3.7-0.6-4.2,1.7-12.9c0,0,2.2-7.3,5-9.6C60.7-0.1,61.1,0,61.3,0c0.6,0.2-0.1,1.5-0.2,1.9c-1.3,3.1-3.8,11.8-3.9,12.6c-0.6,4.6,1.3,16.2,3.9,20.8c0,0,3.1,4.3,5.8,7.5c0.2,0.3,1.1,1.3,0.5,1.7c-0.4,0.2-0.9,0.1-1.2,0c-0.9-0.3-7.5-3.2-11.1-13.2C54.4,29.7,53.5,26.8,53.2,23.2L53.2,23.2L53.2,23.2z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M92.1,18.8c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1
// c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4
// c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C91.7,18.7,91.8,18.7,92.1,18.8L92.1,18.8L92.1,18.8z"/>
fish.path('M92.1,18.8c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C91.7,18.7,91.8,18.7,92.1,18.8L92.1,18.8L92.1,18.8z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M84.5,19.4c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1
// c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4
// c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C84.1,19.3,84.2,19.3,84.5,19.4L84.5,19.4L84.5,19.4z"/>
fish.path('M84.5,19.4c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C84.1,19.3,84.2,19.3,84.5,19.4L84.5,19.4L84.5,19.4z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M77.1,19.9c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1
// c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4
// c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C76.7,19.8,76.8,19.8,77.1,19.9L77.1,19.9L77.1,19.9z"/>
fish.path('M77.1,19.9c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C76.7,19.8,76.8,19.8,77.1,19.9L77.1,19.9L77.1,19.9z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M70.1,20.3c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,0.9-0.4c0.9,0.1,1.5,1.9,1.6,3.1
// c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1.1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4
// c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C69.6,20.2,69.7,20.2,70.1,20.3L70.1,20.3L70.1,20.3z"/>
fish.path('M70.1,20.3c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C69.6,20.2,69.7,20.2,70.1,20.3L70.1,20.3L70.1,20.3z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M62.5,20.7c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,0.9-0.4c0.9,0.1,1.5,1.9,1.6,3.1
// c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1.1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4
// c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C62,20.5,62.1,20.5,62.5,20.7L62.5,20.7L62.5,20.7z"/>
fish.path('M62.5,20.7c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C62,20.5,62.1,20.5,62.5,20.7L62.5,20.7L62.5,20.7z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M54.6,20.8c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,0.9-0.4c0.9,0.1,1.5,1.9,1.6,3.1
// c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1.1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4
// c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C54.2,20.6,54.3,20.7,54.6,20.8L54.6,20.8L54.6,20.8z"/>
fish.path('M54.6,20.8c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C54.2,20.6,54.3,20.7,54.6,20.8L54.6,20.8L54.6,20.8z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M46.8,21.2c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,0.9-0.4c0.9,0.1,1.5,1.9,1.6,3.1
// c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1.1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4
// c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C46.4,21,46.5,21.1,46.8,21.2L46.8,21.2L46.8,21.2z"/>
fish.path('M46.8,21.2c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C91.7,18.7,91.8,18.7,92.1,18.8L92.1,18.8L92.1,18.8z').attr({width: 2, fill:'#fff', stroke: '#333'});
// <path class="st1" d="M46.7,31.2c3.8-1.6,8.4,0.6,11.8,2.2c3,1.4,4.5,2.1,5.2,3.5c1.2,2.7-0.5,6.4-3.5,8.1c-2.6,1.4-5.4,0.9-6.7,0.7
// c-4.2-0.8-6.6-3.6-8.4-5.7c-1.3-1.6-1.7-2.5-1.8-3.4c-0.2-2.1,1.1-3.6,1.3-3.8C45.3,31.8,46.3,31.3,46.7,31.2L46.7,31.2L46.7,31.2z"/>
fish.path('M46.7,31.2c3.8-1.6,8.4,0.6,11.8,2.2c3,1.4,4.5,2.1,5.2,3.5c1.2,2.7-0.5,6.4-3.5,8.1c-2.6,1.4-5.4,0.9-6.7,0.7c-4.2-0.8-6.6-3.6-8.4-5.7c-1.3-1.6-1.7-2.5-1.8-3.4c-0.2-2.1,1.1-3.6,1.3-3.8C45.3,31.8,46.3,31.3,46.7,31.2L46.7,31.2L46.7,31.2z').attr({width:2,fill:'#fff',stroke:'#333'}).css('fill-rule', 'evenodd');
// <line class="st2" x1="44.6" y1="34.3" x2="62.4" y2="43.1"/>
fish.line('44.6,34.3 62.4,43.1').attr({width: 2, stroke: '#333'});
// <line class="st2" x1="43" y1="36.8" x2="58.6" y2="45.4"/>
fish.line('43,36.8 58.6,45.4').attr({width: 2, stroke: '#333'});
// <line class="st2" x1="46.1" y1="32.8" x2="64.1" y2="38.3"/>
fish.line('46.1,32.8 64.1,38.3').attr({width: 2, stroke: '#333'});
// <path class="st1" d="M0,24.1c1.8-2.5,5.9-7.8,9.9-11.8c8-8,12.1-12.2,17.7-12.1C35.8,0.3,41.5,9,43.1,11.4c3.9,6,4.1,11.6,4.3,16.2
// c0.2,5.3,0.6,15.8-6.6,20.1c-1.7,1.1-3.3,1.4-4.7,1.7c-1.4,0.3-28.6-8.3-26-7.1l0,0c3.1-4.2,10.1-5.7,13.2-9.9L0,24.1L0,24.1z
// M20,18.4c0-3.2,3.3-5.9,7.3-5.9c4,0,7.3,2.6,7.3,5.9l0,0c0,3.2-3.3,5.9-7.3,5.9S20,21.7,20,18.4L20,18.4z"/>
fish.path('M0,24.1c1.8-2.5,5.9-7.8,9.9-11.8c8-8,12.1-12.2,17.7-12.1C35.8,0.3,41.5,9,43.1,11.4c3.9,6,4.1,11.6,4.3,16.2c0.2,5.3,0.6,15.8-6.6,20.1c-1.7,1.1-3.3,1.4-4.7,1.7c-1.4,0.3-28.6-8.3-26-7.1l0,0c3.1-4.2,10.1-5.7,13.2-9.9L0,24.1L0,24.1zM20,18.4c0-3.2,3.3-5.9,7.3-5.9c4,0,7.3,2.6,7.3,5.9l0,0c0,3.2-3.3,5.9-7.3,5.9S20,21.7,20,18.4L20,18.4z').attr({width:2,fill:'#fff',stroke:'#333'}).css('fill-rule', 'evenodd');
// <path class="st2" d="M2.5,21.1c0.3-0.3,26.2,11,26.2,11L13.9,43.4"/>
fish.path('M2.5,21.1c0.3-0.3,26.2,11,26.2,11L13.9,43.4').attr({fill: 'none', width: 2, stroke: '#333'});
// <ellipse class="st2" cx="27.3" cy="18.5" rx="10.4" ry="8.2"/>
fish.ellipse().attr({cx: 27.3, cy: 18.5, rx: 10.4, ry: 8.2}).attr({fill: 'none', width: 2, stroke: '#333'});
//</defs>
//<rect x="0" y="0" width="640" height="400"
// style="fill:#333"/>
draw.rect(640, 400).fill({color: '#333'}).stroke('none');
x = Math.round((640 - width) / 2);
y = Math.round((400 - height) / 2);
draw.rect(400, 300).move(x, y).fill('none').stroke({color: 'white', width: 2});
//<use xlink:href="#fish" x="?" y="?"/>
for (i = 0; i < max; i++) {
a[i] = Math.random() * 2 * Math.PI;
da[i] = (Math.random() * 5 + 5) / 360 * 2 * Math.PI;
_x = x + Math.round((width * 0.4) * Math.cos(a[i])) + width * 0.5;
fy[i] = y + (height - depth) + Math.round(Math.random() * (depth * 0.8)) + depth * 0.1;
use[i] = draw.use(fish).move(_x - fish.width() / 2, fy[i] - fish.height() / 2);
use[i].transform({scaleX: Math.round(Math.sin(a[i]) * 1000) / 1000});
}
//<rect x="0" y="0" width="400" height="300"
// style="fill:lightseagreen;fill-opacity:0.1;stroke:white;stroke-width:2"/>
// style="fill:;fill-opacity:0.1"/>
_x = Math.round((640 - width) / 2);
_y = Math.round((400 - height) / 2) + (height - depth);
draw.rect(width, depth).move(_x, _y).fill({color: 'lightseagreen', opacity: 0.1}).stroke('none');
//</svg>
var svgNode = document.getElementById('svg').children[0];
var codeNode = document.getElementById('code');
// Get generated SVG code
var svgText = new XMLSerializer().serializeToString(svgNode);
// Show the code with additional new lines
codeNode.textContent = svgText.replace(/></g, '>\n<');
setInterval(moveFish, delay);
}
このプログラムは以下の情報またはソフトウェアを参照しています。