草庐IT

jquery - 缩放和平移 SVG 的插件

coder 2023-08-11 原文

我正在寻找一个很好的插件来轻松缩放和平移现有的 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/

尝试放大(在图像上使用鼠标滚轮)，您会发现它很模糊。调整窗口大小，它会跳回高质量。

期待您的想法和帮助。

谢谢!

最佳答案

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

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

关于jquery - 缩放和平移 SVG 的插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26180614/

jquerySVGpanzoom34sectionhtml

有关jquery - 缩放和平移 SVG 的插件的更多相关文章

  1. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  2. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. ruby-on-rails - 您希望看到哪些 Rails 插件？ - 2

    您认为可以作为插件很好地存在于您的Rails应用程序中必须实现的哪些行为？您过去曾搜索过哪些插件功能但找不到？哪些现有的Rails插件可以改进或扩展，如何改进或扩展？ 最佳答案 我希望在管理界面中看到一个引擎插件，它提供了应用程序中所有模型的仪表板摘要，以及可配置的事件图表。 关于ruby-on-rails-您希望看到哪些Rails插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questio

  5. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  6. ruby - vagrant 从 github 安装插件 - 2

    我们正在使用Vagrant进行部署，我们最终希望将此集群部署在Rackspace上。vagrant-rackspace插件是一个自然的选择，但它有一些错误，这些错误未包含在最新的0.1.1版本中(notablythatvagrantprovisiondoesn'twork)。我已经在我的personalfork中解决了这个问题通过合并其他人的工作来对存储库进行改造。是否可以从github安装vagrant插件？显而易见的事情没有奏效:[unix]$vagrantplugininstallvagrant-rackspace--plugin-sourcehttps://github.com

  7. IDEA使用LeetCode插件 - 2

    前言我们习惯用idea编写、调试代码，在LeetCode上刷题时，如果能够在IDEA编写代码，并且做好代码管理，是一件事半功倍的事情。对于后续复习题目，做笔记也会非常便利。本文目的在于介绍LeetCodeEditor的使用，以及配置工具类，最终目录结构如下：note：放置笔记src：放置代码leetcode.editor.cn：插件LeetCodeEditor自动生成utils：自定义的工具包，可用于自动化输入测试用例，定义题目需要的类（结构体）out：运行测试时自动生成LeetCodeEditorGitHub：https://github.com/shuzijun/leetcode-edit

  8. regex - Ruby 是否有类似于 Perl 6 语法的插件？ - 2

    多年来，Perl一直是我首选的编程语言工具之一。Perl6语法看起来像是一个很棒的语言特性。我想知道是否有人开始为Ruby做这样的事情。 最佳答案 如果您想在Ruby中使用实际的Perl6语法，最好的选择是Cardinal，Parrot上的ruby​​编译器。它目前尚未完成并且非常缓慢，但我非常希望它最终成为一个可行的ruby​​实现。它目前大部分处于非事件状态，等待Parrot中的一些基础架构更改以支持改进的解析速度和其他功能。 关于regex-Ruby是否有类似于Perl6语法的插件

  9. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

  10. ruby-on-rails - 你为 Rails 推荐哪个状态机插件？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion我正在为Rails3/ActiveRecord项目寻找一个相对简单的状态机插件。我做了一些研究并提出了以下插件:转换:https://github.com/qoobaa/transitions从旧的ActiveRecord状态机库中提取

随机推荐