chengnan
/
s202226701001


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../dist/svg-pan-zoom.js"></script>
  </head>

  <body>
    <div id="limit-div" style="width: 602px; height: 420px; border:1px solid black; ">
      <svg id="limit-svg" 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 fill="none">
          <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>
      </svg>
    </div>

    <script>
      // Don't use window.onLoad like this in production, because it can only listen to one function.
      window.onload = function() {
        var beforePan

        beforePan = function(oldPan, newPan){
          var stopHorizontal = false
            , stopVertical = false
            , gutterWidth = 100
            , gutterHeight = 100
              // Computed variables
            , sizes = this.getSizes()
            , leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth
            , rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom)
            , topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight
            , bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)

          customPan = {}
          customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
          customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))

          return customPan
        }

        // Expose to window namespace for testing purposes
        window.panZoom = svgPanZoom('#limit-svg', {
          zoomEnabled: true
        , controlIconsEnabled: true
        , fit: 1
        , center: 1
        , beforePan: beforePan
        });

        // panZoom.setBeforePan(beforePan)
      };
    </script>

  </body>

</html>