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

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

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

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

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

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

这是我的JSFiddle . (该脚本似乎不适用于JSfiddle,但在服务器上运行时) .

回答(1)

2 years ago

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

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

它将与你的SVG的其余部分一起移动和扩展,而不需要做任何额外的工作 .