This example shows the use of the SVG.js library to:
- create simple objects and set the drag-and-drop on them
- grouping all the objects and make both the zoom and moving effects on the entire draw
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="Example of use of the SVG.js library" /> | |
<meta charset="utf-8"> | |
<title>SVG.js library example</title> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> | |
<script type="text/javascript" src="http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.js"></script> | |
<script type="text/javascript" src="http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.parser.js"></script> | |
<script type="text/javascript" src="http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.import.js"></script> | |
<script type="text/javascript" src="http://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.draggable.js"></script> | |
<script type="text/javascript"> | |
var MAX_ZOOM_IN = 2.0; | |
var MAX_ZOOM_OUT = 0.2; | |
var zoomStep = 0.2; | |
var actualZoom = 1.0; | |
var MOVE_STEP = 100; | |
var draw; | |
var dataDraw; | |
var group; | |
$(function() { | |
//Get the background image from the server and draw the objects | |
$.get( "http://wafi.iit.cnr.it/webvis/tmp/tiger.svg", function( data ) { | |
var xmlDataReceived = (new XMLSerializer()).serializeToString(data); | |
//Set the viewport size | |
draw = SVG('map').size('960px', '450px'); | |
//Set the double click event on the map to zoom on the double clicked point | |
draw.dblclick(function(eventData) { | |
group.center(eventData.x, eventData.y); | |
zoomIn(); | |
}); | |
//Draw the background | |
dataDraw = draw.svg(xmlDataReceived); | |
//Draw two circles and one rectangle on which to do the drag and drop | |
var circle1 = draw.circle(100).fill('#ff0').draggable(); | |
var circle2 = draw.circle(100).fill('#ae2').draggable(); | |
var rect1 = draw.svg('<rect id="rect1235" x="50" y="50" fill="#F7931E" stroke="#C1272D" stroke-width="5" width="100" height="50"/>'); | |
var rect1 = rect1.get('rect1235').draggable(); | |
//Group the background and the created objects to do the tranformations on all | |
group = draw.group(); | |
dataDraw.get('viewport').addTo(group); | |
circle1.addTo(group); | |
circle2.addTo(group); | |
rect1.addTo(group); | |
}, 'xml'); | |
}); | |
function zoomIn(){ | |
if(actualZoom < MAX_ZOOM_IN){ | |
actualZoom = roundFloat(parseFloat(actualZoom) + parseFloat(zoomStep)); | |
group.scale(actualZoom, actualZoom); | |
} | |
} | |
function zoomOut(){ | |
if(actualZoom > MAX_ZOOM_OUT){ | |
actualZoom = roundFloat(parseFloat(actualZoom) - parseFloat(zoomStep)); | |
group.scale(actualZoom, actualZoom); | |
} | |
} | |
function moveDrawLeft(){ | |
group.x(group.x() - MOVE_STEP); | |
} | |
function moveDrawRight(){ | |
group.x(group.x() + MOVE_STEP); | |
} | |
function moveDrawTop(){ | |
group.y(group.y() - MOVE_STEP); | |
} | |
function moveDrawBottom(){ | |
group.y(group.y() + MOVE_STEP); | |
} | |
function roundFloat(value){ | |
return value.toFixed(2); | |
} | |
</script> | |
</head> | |
<body> | |
<div id="map" width="960" height="450"></div> | |
<br/> | |
<button id="zoomIn" onclick="zoomIn()">Zoom In</button> | |
<button id="zoomOut" onclick="zoomOut()">Zoom Out</button> | |
<button id="moveLeft" onclick="moveDrawLeft()">Move left</button> | |
<button id="moveRight" onclick="moveDrawRight()">Move right</button> | |
<button id="moveTop" onclick="moveDrawTop()">Move top</button> | |
<button id="moveBottom" onclick="moveDrawBottom()">Move bottom</button> | |
</body> | |
</html> |
Another issue: Apparently, SVG.js does not support touch events "out of the box". The d3.js example works better.