如何让 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>