jquery - 缩放和平移 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

问题在于浏览器处理 css“转换”的方式。在 Firefox 中，它可以正常工作。在 Google Chrome 中，内容实际上被拉伸(stretch)了(缩放时模糊)。

您必须找到其他缩放方式，例如同时更改图像的高度和宽度。