SVG 拖动以及缩放

时间:2024-03-22 20:17:26

有时候,方法不是没有,而是你找不到

这是找了一上午资源的心路历程


首先我是需要一个SVG图的缩放和平移,svg图是自己做的,然后里面有自己做的动画以及其他时间,但是前几天客户说要改需求,说需要这个图实现SVG的拖动和缩放,

MD,我只是一个后端啊,好吧,后端和前端已经感觉没有区别了。

之前做SVG动画的时候,学习了一下svg的一些动画特效,国内的一个博客写的很好

超级强大的SVG SMIL animation动画详解

十分佩服博主

然后转到SVG的平移,看到了这样一个文章

如何使用 SVG 进行缩放和平移

这个能做到缩放和平移,但是平移是用方向键来进行平移,但是肯定客户体验不行,所有放弃

(PS,在谷歌上搜索的时候,也发现完全一样的文章,好像是搬运的,另外也想过自己写SVG拖拽,但是总是感觉不尽人意)

然后又看到了D3..JS  这个很强大的图形化软件,找到类似的方法

d3.js导入SVG

d3.js 缩放

但是。。。。之前完全没有研究过d3这个js啊。。。。

然后我又看到了这个

两者合并,当当

唔,(°Д°),我菜啊,

然后我又看到了这个js

实现SVG图片放大缩小

看起来行,但实际不行

然后我顺藤摸瓜看到了SVGpan.js

想看看有没有类型的教程

但是我找到了另外的一个 

jquery.panzoom.js,然后里面的最后一个例子完美的实现了我的需求

md,自己真蠢

SVG 拖动以及缩放SVG 拖动以及缩放SVG 拖动以及缩放

给你们一只大脑腐!话说这个之前在GO,js里面看过耶,感觉很棒的样子