基于SVG的背景图像不缩放和平移

Question

我有一个SVG和一个背景图像。我正试着放大SVG和平底锅。我可以让变焦和平移工作，但我的背景图像不会跟随。同样，我可以左右平移，背景图像也会跟随，但当我向上和向下平移时就不会了。

我不能为此使用任何库，例如svg-pan-缩放。真正的应用程序将使用触摸屏，onclick事件将被转换为touchstart事件，这些事件被链接到不同的SVG。然而，对于我的问题，我一直保持简单的按钮。

我也希望我的背景图像添加CSS，而不是与SVG内联，因为这将增加SVG文件的大小。

我还需要div保持相同的大小，以允许摇摄。

当然，有一种方法可以同时缩放SVG和背景图像？

这是我的JSFiddle。(脚本似乎不适用于JSfiddle，但在服务器上运行时会起作用)。

Answer 1

我也希望我的背景图像添加CSS，而不是与SVG内联，因为这将增加SVG文件的大小。

这是不准确的。如果通过SVG中的<image>链接背景图像，它不会像使用CSS那样增加SVG的大小。

它将与SVG的其他部分一起移动和扩展，而不需要做任何额外的工作。