| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <!DOCTYPE html>
- <html>
- <head>
- <script src="../dist/svg-pan-zoom.js"></script>
- </head>
- <body>
- <h1>Demo for svg-pan-zoom: Zooming just one SVG layer</h1>
- <div id="container" style="width: 300px; height: 500px; border:1px solid black; ">
- <svg id="svg-1" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" version="1.1">
- <defs>
- <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
- <stop offset="0%" style="stop-color:rgb(56,121,217);stop-opacity:1" />
- <stop offset="100%" style="stop-color:rgb(138,192,7);stop-opacity:1" />
- </linearGradient>
- </defs>
- <g stroke="#000">
- <rect x="0" y="400" width="100" height="100" fill="yellow"/>
- </g>
- <g fill="none" class="svg-pan-zoom_viewport">
- <g stroke="#000" fill="#FFF">
- <rect x="5" y="5" width="240" height="240" fill="url(#linear-gradient)"/>
- <path d="M 5 5 L 245 245 Z"/>
- </g>
- </g>
- <g stroke="#000">
- <rect x="0" y="0" width="100" height="100" fill="pink"/>
- </g>
- </svg>
- </div>
- <script>
- // Don't use window.onLoad like this in production, because it can only listen to one function.
- window.onload = function() {
- // Expose to window namespase for testing purposes
- window.panZoomInstance = svgPanZoom('#svg-1', {
- viewportSelector: '.svg-pan-zoom_viewport',
- zoomEnabled: true,
- controlIconsEnabled: true,
- fit: true,
- center: true,
- minZoom: 0.1,
- eventsListenerElement: document.querySelector('#svg-1 .svg-pan-zoom_viewport')
- });
- };
- </script>
- </body>
- </html>
|
