如何解决如何让 svg 图像仅在 div 标签内完全移动? Google Blockly javascript 文件
我可以在任何方向移动我的 svg 图像(动画角色),但我只想限制游戏区 div 标签内的移动,而且它没有使用游戏区 div 标签的所有区域来正确移动。这是一个 gif参考
<div class="playarea">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="gokusvg" >
<image id="goku" height="140" width="150" xlink:href="images/goku.png" transform="">
</image>
</image>
</svg>
.playarea {
grid-area: playarea;
border:2px solid black;
height:400px;
width:400px;
}
/* image svg */
#gokusvg {
height:400px;
width:400px;
}
Google Blockly javascript 文件
//block deFinition for Up arrow block
Blockly.Blocks['up'] = {
init: function() {
this.appendDummyinput()
.setAlign(Blockly.ALIGN_CENTRE)
.appendField(new Blockly.FieldImage(
"images/up.svg",50,"*",Up));
this.setColour("#FFFFFF");
}
};
/*character movement funtions*/
//moves the character in upward/north direction
function Up() {
// Todo: Assemble JavaScript into code variable.
var code = document.getElementById('goku').style.y="-100";
var sound = new Audio("sounds/move.mp3"); // buffers automatically when created
sound.loop = false;
sound.play();
}
解决方法
> Add bootstrap class and use raw and column span for stay image into div and
give % to playarea class instead of height and width in px.It will help you.
<script>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
.playarea {
grid-area: playarea;
border:2px solid black;
height:100%;
width:100%;
}
/* image svg */
#gokusvg {
height:400px;
width:400px;
}
</style>
<div class="raw">
<div class="col-sm-1"></div>
<div class="col-sm-10 overflow: hidden;">
<div class="playarea">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="gokusvg" >
<image id="goku" height="140" width="150" xlink:href="images/goku.png" transform="">
</svg>
</div>
</div>
<div class="col-sm-1"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。