Javascript 在图像中保持形状和文本的移动

我有这些元素，可以拖动和调整整个页面的大小

    <!-- SVG elements -->

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         style="left:340px;top:200px;width:100px;height:200px;position:absolute;overflow:hidden" class="mySvgs">
         <line x1="0" y1="0" x2="100%" y2="100%" stroke="#008000" stroke-width="15" stroke-linecap="round" />
     </svg>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         style="left:460px;top:200px;width:100px;height:200px;position:absolute" class="mySvgs">
         <rect x="0" y="0" width="100%" height="100%" stroke="#8000FF" fill="#8080FF"
             rx="10" ry="10" stroke-width="5" />
     </svg>


     <!-- A paragraph -->
     <div style="left:860px;top:20px;width:100px;height:40px;position:absolute;overflow:hidden;text-overflow:ellipsis" id="myParagraph">
        Test
      </div>

     <!-- A button -->
     <div style="left:260px;top:140px;width:100px;height:40px;position:absolute" id="myButton">
         <button style="left:0px;top:0px;width:100%;height:100%;position:absolute">ESP</button>
     </div>

试验
ESP

我想在图像内部移动元素，但不能将它们移到图像外部

我尝试使用：

---

溢出：隐藏

你能为它提供提琴吗。@KiranPurbey: