Question

我正在使用SVGPanZoom在我的混合Android（出于所有意图和目的，与Chrome中相同的行为）应用中管理SVG图像的缩放。虽然缩放效果很好，但我发现了一个奇怪的问题。我原来的内联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"属性和{{1 }} zoomBox`属性被剥夺，我最终得到的图像在默认的拉伸/填充行为方面表现不佳。

SVGPanZoom已被广泛使用，所以我认为这种行为取决于我并没有正确设置它。浸入代码中，我发现SVGPanZoom创建了一个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，然后继续删除原始的zoomBox属性。

如果在缩放后可以正常工作并且应用程序的原始行为没有改变（这不是我所发现的），那还可以。我在这里做什么错了？

Answer 1

我最近也遇到了这个问题。根据我的研究，这就是图书馆的工作方式。我选择暂时使用此限制，但是我发现了其他两个可能会按您期望的方式工作的库（我还没有尝试过）：

jquery.panzoom是一个jQuery库，提供了此功能并且还具有一些不错的功能。我知道很多人都在尝试避免使用jquery，但是它很小，可以做您想做的事情。它可以处理SVG，但我不知道它对viewBox属性有什么作用。
react-svg-pan-zoom是一个react组件，如果您在进行react操作，可能会很有用。

我也尝试过PanZoom库，但这也遇到了相同的viewBox限制。

Answer 2

任何遇到此线程的人的注释。最后，我放弃了SVGPanZoom并决定完全放弃使用任何平移/缩放库的路线。同时，我决定完全停止使用SVG viewBox，并通过SVG转换完全自行处理所有缩放/平移。涉及的核心步骤

将整个SVG内容包装在一个组中，以便更轻松地管理转换。我为此群组使用id属性gOuter
设置SVG的初始比例以占据所需的客户端矩形。以我为例，我有一个viewBox的原始0 0 1600 770，打算占据屏幕宽度的100％和屏幕高度的85％。所以我的缩放比例是scaleX = 1600/window.innerWidth和scaleY = 770/)0.85*window.innerHeight)。
将此初始转换应用于包装的外部组gOuter.setAttribute('transform','0 0 scaleX,scaleY)
现在为了平移到原始视图框中虚拟左上角坐标为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。缩放，然后将其转换回其原始位置。
问题在于，我们还需要考虑到初始缩放比例的原始缩放水平，因此我们将其标记为最后一个变换

这使您可以完全控制缩放过程，并且附带的好处是，与使用平移/缩放库时相比，该操作变得更加平滑。

SVGPanZoom丢弃原始viewBox

2 个答案: