插件缩放和平移SVG

Question

我正在寻找一个好的插件来轻松缩放和平移现有的SVG图像。我已经在使用一个名为Jquery.panzoom的插件，它运行良好，但是当缩放SVG失去清晰度并变得模糊时。不知道是否有人可以引导我在那个方向上走向正确的方向？

这里是我的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); 

和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这里 - http://jsfiddle.net/576a4qeh/1/

原始演示这里（在页面底部） - http://timmywil.github.io/jquery.panzoom/demo/

尝试并放大（在i上使用鼠标滚轮法师），你会发现它是模糊的。调整窗口大小，并跳回到高质量。

期待您的想法和帮助。

谢谢！

Answer 1

这里有一个简单的方法：

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

问题是浏览器处理css“变换”的方式。在Firefox中它没有问题。在谷歌浏览器中，内容实际上已经拉伸（缩放模糊）。

你必须找到另一种缩放方式，像改变图像的高度和宽度。

Answer 3

这里的技巧。 https://github.com/timmywil/jquery.panzoom/issues/84

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