svg-pan-zoom-m
Version:
JavaScript library for panning and zooming an SVG image from the mouse, touches and programmatically.
66 lines (56 loc) • 2.44 kB
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>