Chris Chris - 1 year ago 427
Javascript Question

Plugin to zoom and pan SVG

I'm looking for a good plugin to easily zoom and pan an existing SVG image. I am already using a plugin called Jquery.panzoom and it works well but when zooming the SVG loses clarity and becomes blurry. Not sure if anyone can steer me in the right direction on that one?

Here's my jQuery -

(function ($) {

var $parent = $('#floor_plan');

if($parent.length) {

// set-up panzoom
var $panzoom = $parent.find('.panzoom').panzoom({
increment : 0.5,
minScale : 1,
maxScale : 8,
startTransform : 'scale(4.0)',
$zoomIn : $parent.find('A[href=#zoom_in]'),
$zoomOut : $parent.find('A[href=#zoom_out]'),
contain : 'invert'
}).panzoom('zoom', true);

// handle scrolling in and out
$panzoom.parent().on('mousewheel.focal', function (e) {


var delta = || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;

$panzoom.panzoom('zoom', zoomOut, {
increment : 0.1,
animate : false,
focal : e

And the HTML -

<div id="floor_plan" class="hidden-xs hidden-sm">

<div class="zoom-control">
<a href="#zoom_in"><i class="fa fa-fw fa-plus-square-o"></i></a>
<a href="#zoom_out"><i class="fa fa-fw fa-minus-square-o"></i></a>
<div class="close">
<a href="#close_floor_plan"><i class="fa fa-fw fa-times"></i></a>

<div class="panzoom">
<img src="" alt="Floor Plan" style="width: 100%; height: auto; display: block" />

Example JSFiddle here -

Original demo here (at bottom of page) -

Try and zoom in (using the mouse wheel over the image) and you will notice it is blurry. Resize the window and it jumps back to high quality.

Look forward to your thoughts and help.


Answer Source

Here's a simple approach:


<div class="panzoom">
    <div class="img"></div>

<input id="zoom" type="range" class="zoom-range" step="1" min="200" max="1500">


.panzoom {
    overflow: scroll;
    width: 250px;
    height: 200px;
.panzoom .img {
    background: url('') no-repeat 0 0 fixed;
    min-height: 768px;
    min-width: 500px;


    $(".panzoom .img").css("background-size", this.value + "px")

$('.panzoom .img').mousemove(function(e){
    var mousePosX = (e.pageX/$(window).width())*100;
    $('background-position-x', mousePosX +'%');
    var mousePosY = (e.pageY/$(window).height())*100;
    $('background-position-y', mousePosY +'%');

JSFiddle Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download