问题标签 [svgpanzoom]

我有一个<object>加载外部 svg 文件的位置：

我正在使用以下库的 SVG 平移和缩放功能：https ://github.com/ariutta/svg-pan-zoom 。但是，仅将svg-pan-zoom.js文件添加到我的页面似乎不足以向object代码中包含的 svg 添加任何类型的功能：

注意：除了 SVG-Pan-Zoom.js 之外，jQuery 是我唯一使用的库 关于如何解决此问题/改进代码的任何提示？
我得到的当前错误是svgPan is not defined.

上面的代码更新了

这是ariutta/svg-pan-zoom的一个特定于库的问题。

我有一个带有一些<a>标签的 SVG 元素。通过 jQuery，我处理对这些元素的点击：$('svg').on('click', 'a', function() { ... }).

现在我添加了上面提到的用于缩放和平移 SVG 元素的库。这很好用，除了每次我在光标位于a元素上时平移时，它都会触发点击侦听器。

当 mouseup 由 pan 引起时，如何防止监听器触发？

我正在使用 svg.js 和出色的 svg-pan-zoom 插件（https://github.com/ariutta/svg-pan-zoom）。

现在我想要一个按钮，当我单击它时，它会在我看到的视口的当前中心点上绘制一个圆圈（因此该位置是动态的，具体取决于我所做的平移/缩放）。

我在这里设置了一个快速示例，在指定位置静态绘制圆。

请注意我有一些特定的需求：我正在显示一个具有如下比例因子的“背景”图像：

那么我怎样才能得到当前的中心点呢？

我正在使用 ariutta svg-pan-zoom 库（https://github.com/ariutta/svg-pan-zoom）。

当用户单击按钮时，我试图平移到 (x:1000, y:20) 处的特定形状。我也希望图像在这一点上居中。

我面临的问题是我试图平移和居中的点离开屏幕。

我目前正在使用：

但这不起作用。

请参阅 jsFiddle 了解更多信息：http: //jsfiddle.net/arjSharma/n6r55dp1/2/

谁能帮我解决我的问题？

谢谢

我正在使用这个很棒的插件。但是缩放停止有问题

所以在return false我的地图上消失了。我检查了矩阵数据，发现坐标有很大的负数

如何解决这个问题？

我有一个动态生成的 svg 图像，我正在使用 Ariutta 的 svg-pan-zoom 插件。当我双击一个 svg 图像时，我将 pan.x = centerOfScreenX 和 pan.y = centerOfScreenY 设置为将图像置于屏幕中间。IE：

目前这会导致图像突然移动到屏幕中心。有没有一种方法可以为平移位置的这种变化设置动画，以便双击的图像沿着一条路径移动到屏幕中心？

Bumbu 提出了两种解决方案（见下面的答案），我首先尝试了。但是我的尝试没有奏效，我不知道为什么。

当我尝试运行此代码时，窗口冻结并且我无法再与我的应用程序交互，除非我关闭窗口并重新加载它。我的猜测是我以某种方式触发了无限循环。

我正在使用 Ariutta 的 svg-pan-zoom 和 svg.js。我已禁用本机 Arriuta 双击功能并尝试添加自己的功能，最终由平移调整和动画组成。

通常这可以正常工作，但有时当我加载我的页面时，双击功能会出现奇怪的行为。根据我的调试，有时当我的应用程序加载时，我编写的双击函数会为每次双击调用两次。这会导致动画表现异常，并且似乎没有一致的依据来说明何时出现此问题。重新启动我的服务器有时有效，有时无效。我几乎只需要继续重新加载我的页面，直到问题消失。

我最初的想法是，我的文件的加载顺序可能有问题，有时加载不正确。目前正在调查此事。我的另一个想法是，这可能与 svg.js 动画库有关，或者我试图替换 arriuta 插件中的本机双击功能。想法？

当它行为正确时，svg 图像居中然后增长。当它行为不正确时，它会居中，然后缩小为虚无。

我正在使用 Panzoom.js 插件来平移和缩放元素。有一个蒙版应用于光标，光标在图像上悬停的任何地方都会显示底层图像的一部分（想象彩色图像顶部的黑白图像，光标会在任何地方显示彩色图像的一部分光标悬停在图像上）。当我在 Chrome 和 Safari（使用 Panzoom）中放大图像时，鼠标坐标被正确给出，因此蒙版与光标正确对齐。但是，在 Firefox 和 IE 中，放大光标坐标时不正确，因此悬停蒙版无法与光标正确对齐。我错过了一些明显的东西吗？感谢您查看这个。下面是代码。

我正在使用 svg-pan-zoom ( https://github.com/ariutta/svg-pan-zoom/ ) 在我的 angularJS 页面中显示 SVG：

根据某些事件，我想更改显示的 SVG，因此在单击某些元素后，我正在调用一个changeSVG(fileName)函数：

SVG 已更改并显示，但是：我失去了缩放和平移功能。

如果再次单击同一元素，我将恢复缩放和平移功能。最后，为了更改显示的 SVG 并保留缩放/平移功能，我需要单击 2 次而不是单击一次。一键调用该函数 2 次而不是 1 次并不能解决问题。

我的 changeSVG 功能：

编辑：我为测试尝试了这个，但它甚至根本不加载平移缩放，即使点击 2 次：

编辑 2：

您可以在此处的 plunker 上看到它：http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview我们 需要嵌入以使其正常工作（我猜是全宽问题）。将鼠标放在左侧以生成菜单，您会看到我们需要在一个元素上单击两次才能重新激活平移/缩放。

Using svgpanzoom, angularjs and jquery i'm building a SPA designed to view different SVG. It's working with firefox (except for some other issues) but not on chrome.

In my html I have this :

In my controller file I have outside of the controller :

};

Inside my controller :

I tried a few logs to see what's happening : You can see them more in detail at this git issue : https://github.com/ariutta/svg-pan-zoom/issues/109

From what I understand, this.options.svg is displayed as a SVG element in Firefox while it is showed as a html element in Chrome.

Additionnally to those posted, I also tried :

which gives on firefox :

While on chrome the result is :

I can't figure out why this is happening, and why only with Chrome.

There is a lite example there : http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview

(You can change svg using the menu by moving the mouse on the left edge, another issue I have is that I need to click twice in order to change it properly)

Another weird thing about all this is : online via Plunker, it also works on Chrome. But locally, after downloading the zip, it doesnt.