var mySVG = SVG('drawing').size(500, 300).attr('id','svg-container').addClass('svg-container');
var panZoomInstance = svgPanZoom('#svg-container', {
panEnabled: true,
controlIconsEnabled: false,
zoomEnabled: true,
dblClickZoomEnabled: true,
mouseWheelZoomEnabled: true,
preventMouseEventsDefault: true,
zoomScaleSensitivity: 0.2,
minZoom: 0.5,
maxZoom: 3,
fit: false,
contain: false,
center: false,
refreshRate: 'auto',
eventsListenerElement: null
});
(document.getElementById('reset')).addEventListener("click", function(event) {
panZoomInstance.reset();
});
(document.getElementById('corner')).addEventListener("click", function(event) {
var currentZoom = panZoomInstance.getZoom();
panZoomInstance.pan({x: -50*currentZoom, y: -120*currentZoom});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.6/svg.js"></script>
<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" id="drawing">
<rect width="30" height="10" fill="green"/>
</svg>
<script>
</script>
</body>
</html>var mySVG = SVG('drawing').size(500, 300).attr('id', 'svg-container').addClass('svg-container');
var panZoomInstance = svgPanZoom('#svg-container', {
panEnabled: true,
controlIconsEnabled: false,
zoomEnabled: true,
dblClickZoomEnabled: true,
mouseWheelZoomEnabled: true,
preventMouseEventsDefault: true,
zoomScaleSensitivity: 0.2,
minZoom: 0.5,
maxZoom: 3,
fit: false,
contain: false,
center: false,
refreshRate: 'auto',
eventsListenerElement: null
});
(document.getElementById('reset')).addEventListener("click", function(event) {
panZoomInstance.reset();
});
(document.getElementById('corner')).addEventListener("click", function(event) {
var currentZoom = panZoomInstance.getZoom();
panZoomInstance.pan({
x: -50 * currentZoom,
y: -120 * currentZoom
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.6/svg.js"></script>
<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" id="drawing">
<rect width="80" height="40" fill="green"/>
</svg>
</body>
</html>When i try to rotate the pan and zoom-able svg to 90 degree, the rotation has happend and zoom also woeking fine as expected. But, when i try to pan the rotated svg, it's not working properly as expected. If i click and drag the mouse to left the svg is moving up and if i drag to right it's moving down. I i click the rotate button, placed transform g tag and apply around svg inner html of the svg.