Javascript 如何让svg图像仅在div标记内完全移动？

我可以在任何方向上移动我的svg图像（动画角色），但我只想限制play area div标记内的移动，而且它没有使用play area div标记的所有区域来正确移动。这里有一个gif供参考

googleblockly-javascript文件

src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
.游戏区{
网格区：游戏区；
边框：2件纯黑；
身高：100%；
宽度：100%；
} 
/*图像svg*/
#gokusvg{
高度：400px；
宽度：400px；
}

src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
.游戏区{
网格区：游戏区；
边框：2件纯黑；
身高：100%；
宽度：100%；
} 
/*图像svg*/
#gokusvg{
高度：400px；
宽度：400px；
}

我在这个游戏中使用CSS网格，所以当我添加bootsrap时，它不起作用，我遇到了代码冲突，而且CSS网格也因此而中断。然后尝试使用边距属性并在%中给出转换属性，然后尝试它应该可以工作。在游戏区域div标记中，对吗？我在这个游戏中使用CSS网格，所以当我添加bootsrap时，它不工作，我遇到了代码冲突，CSS网格也因此而中断。然后尝试使用margin属性并在%中给出transform属性，然后尝试它应该可以工作。在play area div标记中，对吗？

<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;  
 
}

//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,
        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.