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

时间:2017-02-10 12:57:02

标签: javascript html css

我有这些元素可以在整个页面上拖动和调整大小。

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

我想在图像内部移动元素,而不能将它们带到图像之外。

我试过用: 溢出:隐藏

0 个答案:

没有答案