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>