问题标签 [svgpanzoom]

使用 AngularJS 和 svg-pan-zoom，我使用<object>如下方式显示外部 svg：

问题是当我使用这样的函数更改我的 svg 时：

仅更新范围变量。我必须在链接上单击两次才能更新datahtml <object>。

这是changeSVG(fileName)功能：

在我的控制器之外：

在我的控制器中：

我正在使用控制台检查一些值，实际上，当我调用我的函数时，范围变量会更新，但data我的 html 的属性<object>直到我第二次单击时才会更新。知道发生了什么吗？我希望一键更新我的html，而不是两次。

这是一个实时示例，单击左侧的菜单以更改 SVG 并查看行为： http ://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview （这可能不适用于 IE）

我正在使用 javascript svg-pan-zoom.js ( https://github.com/ariutta/svg-pan-zoom ) 库在 Web 应用程序中缩放和平移 svg。在 Firefox 中放大非常缓慢和滞后，而在 Chrome 和 IE11 中放大效果非常好（使用呈现平面图的 5MB .svg 文件进行测试 - 如果文件较小，则此问题不那么明显）。平移工作正常。我在论坛上阅读了很多关于这个问题的主题，但我还没有找到任何解决方案。有谁知道是什么导致了这个问题以及如何解决它？

Example: http://jsfiddle.net/coz3fd0L/3/

我正在向html浏览器动态发送一个片段。此代码段包含SVG一段 Javascript：

片段中的函数运行良好，但由于它在完全加载（ ）svgPanZoom之前运行而失败。另一方面，如果我在点击前引入 an 并给它几秒钟，一切正常：SVGTypeError: e.getSVGDocument(...) is nullalert()

显然这不是一个光荣的解决方案，所以在加载完所有内容后如何运行动态加载的脚本？一些等价物$(window).load(function(){...});？

我想缩放除了 svg 画布上的一些路径/文本之外的所有内容，而不使用 svgpanzoom js 更改路径/文本的确切位置。我需要的实际工作就像一张带有一些标记的地图，我还想动态放置新的图钉或标记......

上图是一个看起来像的 svg 示例，我正在尝试缩放 SVG 内的所有内容，但标记和文本本身应该位于同一位置，而不会增加其缩放级别

我正在使用svgpanzoom

基本上我只想在指定组上出现鼠标\捏合时触发平移/缩放事件。

PS：图层演示允许对组进行转换，但平移缩放事件仍从 svg 标签传播

我没有太多的编码经验，我试图让用户对嵌入在元素中的 SVG 进行一些控制。我找到了 ariutta svgpanzoom.js 库，但是当我尝试用它做一个小测试时，我在 chrome 中遇到了一个安全错误（一切都适用于 Firefox 和 Safari）

这是我的基本代码

我在 Chrome 上遇到的错误是： Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from access a frame with origin "null". 协议、域和端口必须匹配。

有谁知道我做错了什么？

提前致谢...

我正在使用 ariutta svg-pan-zoom 库（https://github.com/ariutta/svg-pan-zoom）。（也与 jquery.layout.js 窗格和 jquery-ui.js 一起使用）

我想保存 svg-pan-zoom svg 的平移和缩放值等值，并使用这些值使用具有不同大小窗口的浏览器跳转到相同的位置。

目前我正在使用 getPan() 和 getZoom() 来保存值；然后在另一个浏览器中缩放（缩放）和平移（平移）以缩放和平移到同一位置。当浏览器窗口大小不同时，这不起作用。

我找到了这篇文章，但它没有解决大小不同的窗口：
平移到特定的 X 和 Y 坐标和中心图像 svg-pan-zoom

我正在使用 ariutta svg-pan-zoom 库（https://github.com/ariutta/svg-pan-zoom）。现在我想创建一个 ThumbnailViewer，如演示文件中所述（查看源：http ://ariutta.github.io/svg-pan-zoom/demo/thumbnailViewer.html ）。

我没有使用标签嵌入 svg.file，而是直接使用 . 我必须如何更改此工作的演示代码？

我的代码列表：

我正在使用出色的 svg-pan-zoom 插件 ( https://github.com/ariutta/svg-pan-zoom ) 来平移/缩放我的 svg 元素，我想启用鼠标拖动来移动它。

我的 svg 中有一个元素，我想在其中阻止拖动，因为它有一个单击事件，当用户单击它时，有时它会拖动 svg 元素。请求的行为是作为标准拖动，除非鼠标在此元素上。我已经尝试使用 event.stopPropagation() 和 event.preventDefault() 但似乎 svg-pan-zoom 插件有自己的事件管理。

如何防止鼠标拖动？

我有两个带有 SVG 的示例和一些带有 SVG 过滤器的文本，其中文本在 Firefox 中显示模糊。在 Chrome 浏览器中，应用过滤器的文本很清晰。

SVG 用作地图，因此第一个示例使用此 SVG-Pan-Zoom 库 ( https://github.com/ariutta/svg-pan-zoom )

示例 1：http ://plnkr.co/edit/P4o7JUY4fNg5DDzF3QiD?p=preview

有趣的是，在平移地图时，文本会在短时间内显得清晰。

对于第二个示例，我能够通过仅在 HTML 中包含 SVG 来重建问题，而无需涉及任何 Javascript。

示例 2：http ://plnkr.co/edit/UJMMFS5hGTIzesWXFf1Q?p=preview

这是过滤器：

这是文本元素：

有什么想法可以解决这个问题，所以文本在 Firefox 中总是很清晰？可能是因为平移和缩放库应用于 svg 的转换？转换看起来像：

这可以在第二个例子中看到。