SVGPanZoom丢弃原始viewBox

Question

我正在使用SVGPanZoom来管理我的混合安卓系统中SVG图像的缩放(无论出于什么目的和目的，行为都与Chrome相同)。虽然放大效果很好，但我发现了一个奇怪的问题。我最初的内联SVG元素如下

 <svg id='puzzle' viewBox='0 0 1600 770' preserveAspectRatio='none'
  width='100vw' height='85.5vh' fill-rule='evenodd' clip-rule='evenodd' 
  stroke-linejoin='round' stroke-miterlimit='1.414' 
  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http:// 
  www.w3.org/1999/xlink'>

最初，这个SVG元素是空的，并在运行时以编程方式从JavaScript中填充，然后我启动SVGPanZoom，如下所示

var panZoom = svgPanZoom('#puzzle', 
{panEnabled:false,controlIconsEnabled:false,
zoomEnabled:true,dblClickZoomEnabled:true,onZoom:postZoom});

panZoom.refreshRate = 10;
panZoom.zoomScaleSensitivity = 0.02;

我遇到的问题是--我希望我的SVG映像填充可用的区域，完全由100vw x 85.5vh完成，我通过上面的preserveAspectRatio="none"属性以及viewBox="0 0 1600 770" attribute. I have found that this works - so long as I don't use SVGPanZoom. As soon as I initiate panZoom the problem‘属性指示它，最后我得到了一个图像，它的默认拉伸/填充行为不太好。

SVGPanZoom被广泛使用，因此我假设这种行为是由我决定的，而不是完全正确地设置它。在我发现的代码中，SVGPanZoom创建了一个cacheViewBox，然后继续删除原始的zoomBox属性。

这是很好的，如果之后缩放工作和应用程序的原始行为不改变，这不是我所发现的。我在这里做错什么了？

Answer 1

给任何碰到这条线的人的便条。最后，我放弃了SVGPanZoom，决定放弃使用任何pan/缩放库的路线。同时，我决定完全停止使用SVG viewBox，完全由我自己通过SVG转换处理所有缩放/平移操作。所涉及的核心步骤

• 将整个SVG内容包装在一个组中，以便更容易地管理转换。对于这个组，我使用id属性gOuter。
• 为SVG设置一个初始标度，以占用所需的客户端矩形。在我的例子中，我有一个最初的viewBox of 0 0 1600 770，打算占用屏幕宽度的100%和屏幕高度的85%。所以我的比例是scaleX = 1600/window.innerWidth和scaleY = 770/)0.85*window.innerHeight)。
• 将此初始转换应用于包装外部组gOuter.setAttribute('transform','0 0 scaleX,scaleY)
• 现在，为了缩放到原始viewBox中的虚拟左上角坐标为Ox,Oy的对象，可以使用转换

gOuter.setAttribute('transform',

scale(scaleX,scaleY) translate(-Ox,-Oy) scale(2*scaleX,2*scaleY) translate(Ox,Oy))

放大以x 2的倍数放大。这里需要理解的重要事情

• 在SVG中，转换是从右到左的。
• 在这里，我们正在将缩放点转换到最上面的l.h.s。缩放，然后将其转换回原来的位置。
• 问题是，我们还需要允许初始缩放的初始缩放级别，因此我们将其标记为最后一次转换。

这将使您完全控制缩放过程，并且作为边缘好处，操作变得比使用pan/缩放库时要平稳得多。

Answer 2

我最近也遇到过这个问题。从我的研究来看，这正是图书馆的运作方式。我现在选择接受这种限制，但我找到了其他几个库，它们可能按照您的意愿工作(我还没有试过它们)：

• jquery.panzoom是一个jquery库，它提供了这个功能，也有一些不错的特性。我知道很多人试图避免jquery，但它非常小，可以做您想做的事情。它处理SVG，但我不知道它如何处理viewBox属性。
• 反应-svg-pan-变焦是一个react组件，如果您在react中工作，它可能很有用。

我也尝试过PanZoom库，但这也有同样的viewBox限制。