Plugin for zooming and panning SVG

Question

I am looking for a good plugin to easily scale and pan an existing SVG image. I already use a plugin called Jquery.panzoom and it works well, but when scaling SVG loses clarity and becomes blurry. Not sure if anyone can direct me in the right direction on this?

Here is 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) { e.preventDefault(); var delta = e.delta || e.originalEvent.wheelDelta; var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0; $panzoom.panzoom('zoom', zoomOut, { increment : 0.1, animate : false, focal : e }); }); } })(jQuery); 

And 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> <div class="close"> <a href="#close_floor_plan"><i class="fa fa-fw fa-times"></i></a> </div> <div class="panzoom"> <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" alt="Floor Plan" style="width: 100%; height: auto; display: block" /> </div> </div> 

JSFiddle example here - http://jsfiddle.net/576a4qeh/1/

Original demo here (bottom of page) - http://timmywil.imtqy.com/jquery.panzoom/demo/

Try zooming in (using the mouse wheel over the image) and you will notice that it is blurry. Resize the window and it will return to quality.

Look forward to your thoughts and help.

Thanks!

Answer 1

Here's a simple approach:

HTML:

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

CSS

 .panzoom { overflow: scroll; width: 250px; height: 200px; } .panzoom .img { background: url('http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg') no-repeat 0 0 fixed; min-height: 768px; min-width: 500px; } 

JS:

 $("#zoom").change(function(){ $(".panzoom .img").css("background-size", this.value + "px") }); $('.panzoom .img').mousemove(function(e){ var mousePosX = (e.pageX/$(window).width())*100; $(e.target).css('background-position-x', mousePosX +'%'); var mousePosY = (e.pageY/$(window).height())*100; $(e.target).css('background-position-y', mousePosY +'%'); }); 

JSFiddle Demo

Answer 2

The problem is how the browser handles the css conversion. In Firefox, it works without problems. In Google Chrome, the content is actually stretched (blur when scaling).

You need to find another way to scale, such as changing the height and width of the image.

Answer 3

Here are the tricks. https://github.com/timmywil/jquery.panzoom/issues/84

 .panzoom { -webkit-backface-visibility: initial !important; -webkit-transform-origin: 50% 50%;}