D3 Examples - Zoom and drag-and-drop with SVG.js library

xxxxxxxxxx
 
<!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="https://code.jquery.com/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.js"></script>
        <script type="text/javascript" src="https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.parser.js"></script>
        <script type="text/javascript" src="https://wafi.iit.cnr.it/webvis/tmp/svgjslib/svg.import.js"></script>
        <script type="text/javascript" src="https://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( "https://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>
    