lost scone

Icônes souris

ci-dessous code article





<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<style>
   .draggable {
        cursor: move;
   }
</style>
   
    <script type="text/ecmascript">
    var selectedElement = 0;
    var currentX = 0;
    var currentY = 0;
    var currentMatrix = 0;

    function selectElement(evt) {
      selectedElement = evt.target;
      currentX = evt.clientX;
      currentY = evt.clientY;
      currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' ');
   
      for(var i=0; i&lt;currentMatrix.length; i++) {
        currentMatrix[i] = parseFloat(currentMatrix[i]);
      }
     
      selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
      selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
      selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
    }
       
    function moveElement(evt) {
      var dx = evt.clientX - currentX;
      var dy = evt.clientY - currentY;
      currentMatrix[4] += dx;
      currentMatrix[5] += dy;
     
      selectedElement.setAttributeNS(null, "transform", "matrix(" + currentMatrix.join(' ') + ")");
      currentX = evt.clientX;
      currentY = evt.clientY;
    }
       
    function deselectElement(evt) {
      if(selectedElement != 0){
          selectedElement.removeAttributeNS(null, "onmousemove");
          selectedElement.removeAttributeNS(null, "onmouseout");
          selectedElement.removeAttributeNS(null, "onmouseup");
          selectedElement = 0;
          }
        }
       
     </script>
   

    <rect x="0.5" y="0.5" width="500" height="500" fill="black"></rect>

<image y="0" x="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://41.media.tumblr.com/e808ff325d6b092b0cd27199f7881de6/tumblr_np2ixqnQEb1toyd5ao1_500.jpg" id="fond" height="500" width="500"/>

<image class="draggable" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://supermacs.ie/wp-content/uploads/2014/02/Raisin-scone_L.png" id="svg_1" height="60" width="60" y="95" x="55" transform="matrix(1 0 0 1 123 42)" onmousedown="selectElement(evt)"/>

</svg>