rackaam/gist:762fcaa1bfd6c863a499

## gistfile1.js
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="map.css" media="screen" />
  </head>
  <body>

  <script src="interact-1.2.4.min.js"></script>
  <script type="text/javascript">


// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    onmove: dragMoveListener,
  });

  function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

  // this is used later in the resizing demo
  window.dragMoveListener = dragMoveListener;


   </script>

    <div>
        <img src="map.svg" alt=""/>
        <div id="root">

        <svg width="240" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2" id="svgtest" class="draggable">
            <marker id="triangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="2" markerHeight="2" orient="auto">
              <path d="M 0 0 L 10 5 L 0 10 z"/>
            </marker>
            <line x1="1" y1="1" x2="20" y2="1" marker-end="url(#triangle)" stroke="black" stroke-width="1"/>
        </svg>

        </div>
        <div id="pos" class="item">pos</div>
    </div>
}


<script type="text/javascript">
    var div = document.getElementById('svgtest'),
        deg = 90;

        var x = 156;
        var y = 200;
    div.style.transform       = 'translate(' + x + 'px, ' + y + 'px) rotate('+deg+'deg) ';
    div.onclick = function(e) {
      console.log('test ' + e.pageX);
    };

</script>


  </body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" type="text/css" href="map.css" media="screen" />
	</head>
	<body>

	<script src="interact-1.2.4.min.js"></script>
	<script type="text/javascript">


	// target elements with the "draggable" class
	interact('.draggable')
	.draggable({
	onmove: dragMoveListener,
	});

	function dragMoveListener (event) {
	var target = event.target,
	// keep the dragged position in the data-x/data-y attributes
	x = (parseFloat(target.getAttribute('data-x')) \|\| 0) + event.dx,
	y = (parseFloat(target.getAttribute('data-y')) \|\| 0) + event.dy;

	// translate the element
	target.style.webkitTransform =
	target.style.transform =
	'translate(' + x + 'px, ' + y + 'px)';

	// update the posiion attributes
	target.setAttribute('data-x', x);
	target.setAttribute('data-y', y);
	}

	// this is used later in the resizing demo
	window.dragMoveListener = dragMoveListener;


	</script>

	<div>
	<img src="map.svg" alt=""/>
	<div id="root">

	<svg width="240" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2" id="svgtest" class="draggable">
	<marker id="triangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="2" markerHeight="2" orient="auto">
	<path d="M 0 0 L 10 5 L 0 10 z"/>
	</marker>
	<line x1="1" y1="1" x2="20" y2="1" marker-end="url(#triangle)" stroke="black" stroke-width="1"/>
	</svg>

	</div>
	<div id="pos" class="item">pos</div>
	</div>
	}



	<script type="text/javascript">
	var div = document.getElementById('svgtest'),
	deg = 90;

	var x = 156;
	var y = 200;
	div.style.transform = 'translate(' + x + 'px, ' + y + 'px) rotate('+deg+'deg) ';
	div.onclick = function(e) {
	console.log('test ' + e.pageX);
	};

	</script>



	</body>
	</html>