javascript - how to let the svg image completely move inside the div tag only?

Question

I can move my svg image(animated character) in any direction but I want to restrict the movement inside play area div tag only and also it's not using all the area of the play area div tag to move properly.Here's a gif for the reference

<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 file

//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(); 
   
}

Answer 1

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