我在这里想要做的是,我添加了一个小图像,它会在身体周围移动..但问题是,我希望小图像在 svg 框中移动 ..我试图采取SVG ID 并让它附加图像。它仍然会移出 svg 框。我想知道,如果我错过了一些编码?
$(window).load(function(){
$(document).ready(function(e) {
var num = 0;
var interval;
/*var svg = d3.select("main").append("svg:svg")
.attr("width", w)
.attr("height", h);
*/
$('#add').click(function(e) {
$('#box').append('<div class="predator" id="predator'+ num + '"><img src="Pictures/PondSpecies/anchovies.png"></div>');
$('#predator'+num).css({
left: randomRange(500,150),
top: randomRange(400,150)
});
if (interval)
clearInterval(interval);
interval = setInterval (function () {
for (var i=0; i<num; i++) {
$('#predator'+i).animate ({
left: '+=' + randomRange(-11,11),
top: '+=' + randomRange(-11,11)
s /* Extra */
//if (x < 0 || x > w) SVG.vx *= -1;
//if (y < 0 || y > h) SVG.vy *= -1;
}, 100);
}
}, 100);
num++;
});
$('#remove').click(function(e) {
num--;
$('#predator' + num).remove();
if (num == 0 && interval)
clearInterval(interval);
});
});
/* FUNCTIONS */
function randomRange(min, max) {
return Math.random() * (max-min) + min;
}
});
HTML正文:
<div id="box">
<SVG xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" id="main" style="border:solid 1px #000000;width:515;height:474;">
<image xlink:href="Pictures/PondEnvironment/pond.png" x="0" y="0" width="513" height="474" />
</SVG>
</div>
非常感谢您的帮助!