| 123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <!DOCTYPE html>
- <html>
- <head>
- <script src="../dist/hammer.js"></script>
- <script src="../dist/svg-pan-zoom.js"></script>
- <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
- </head>
- <body style="width: 100%; height: 100%">
- <h1>Demo for svg-pan-zoom: Resize SVG container on page resize</h1>
- <div id="container" style="width: 95%; height: 80%; border:1px solid black; ">
- <svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: 100%; height: 80%; " version="1.1">
- <g id="g444" fill="none">
- <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
- </g>
- </svg>
- </div>
- <script>
- // Don't use window.onLoad like this in production, because it can only listen to one function.
- window.onload = function() {
- var panZoom = window.panZoom = svgPanZoom('#demo-tiger', {
- zoomEnabled: true,
- controlIconsEnabled: true,
- fit: 1,
- center: 1
- });
- $(window).resize(function(){
- panZoom.resize();
- panZoom.fit();
- panZoom.center();
- })
- };
- </script>
- </body>
- </html>
|
