插件缩放和平移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/

尝试并放大(使用图像上的鼠标滚轮),你会发现它是模糊的.调整窗口大小,它会跳回到高质量.

期待您的想法和帮助.

谢谢!

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 演示