背景图像不使用SVG进行缩放和平移

Question

我有一个SVG和一个背景图片。我试图放大和缩小SVG，以及平移。我可以让缩放和平移工作，但我的背景图像不会效仿。同样，我可以向左和向右平移，背景图像将跟随，但不是在我上下平移时。

我无法使用任何库，例如SVG-平移变焦。真正的应用程序将使用触摸屏，onclick事件将转换为touchstart事件，这些事件链接到不同的SVG。但是，对于我的问题，我通过按钮保持简单。

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

我还需要div保持相同的大小，以便进行平移。

当然有一种方法可以同样的方式缩放SVG和背景图像吗？

这是我的JSFiddle。 （该脚本似乎不适用于JSfiddle，但在服务器上运行时）。

Answer 1

  

我也更喜欢用CSS添加我的背景图像而不是与SVG内联，因为这会增加SVG文件的大小。

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

它将与SVG的其余部分一起移动和扩展，而无需进行任何额外的工作。