插件縮放和平移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%;}