添加链接 注册    登录
link管理
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
纯真的丝瓜  ·  小米生态链全新品牌发布：MIJIA米家 - ...·  2 月前    · 
刀枪不入的皮带  ·  全国优秀大学生夏令营持续开放申请 | ...·  4 月前    · 
刚分手的哑铃  ·  A new accessibility ...·  4 月前    · 
欢快的匕首  ·  高甜广播剧公园之夜_光·遇·  6 月前    · 
高大的桔子  ·  搜索关键字拼音智能提示实现_mongo可以根 ...·  6 月前    · 
link管理  ›  svg如何设置中心点进行缩放-CSDN社区
动态 滚动条 svg transform
https://bbs.csdn.net/topics/391984175
冷冷的单杠
3 月前
JavaScript 帖子详情

svg如何设置中心点进行缩放

jeremylai 2016-07-13 08:37:19
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="900" viewBox="0 0 1000 800">
这是需要缩放的svg文件
缩放svg的原理是通过改变svg标签里的viewpoint的参数来实现的，前面两个参数是改变图片的坐标，即通过鼠标拖拉改变。
而后面的两个参数是通过滚动条来改变图片的大小，就是缩放图片。但是缩放的时候，后面的两个属性会改变的，但是缩放的中心不能设置，
...全文
1520 9 打赏 收藏
用AI写文章
9 条 回复
切换为时间正序
请发表友善的回复…
发表回复
huanyao11 2018-06-25
  • 打赏
  • 举报
回复
中心点设置：x = x+width/2 y=y+height/2
缩放开始前后需要变换对应的位置，直接举例：
<rect x="110" y="100" width="120" height="90" data-svg="gltransform_tcwanimate" transform="translate(170 145) scale(1.5, 1.5) translate(-170 -145)">
</rect>
匿名用户都被注册了 2016-09-06
  • 打赏
  • 举报
回复
引用 7 楼 jeremylai 的回复:
我自己都没有做完呀
我也没做完，交流一下方便吗？
jeremylai 2016-09-05
  • 打赏
  • 举报
回复
我自己都没有做完呀
匿名用户都被注册了 2016-09-04
  • 打赏
  • 举报
回复
你好，我也在做类似的东西，方便私信交流一下吗？
qq2460857094 2016-07-22
  • 打赏
  • 举报
回复
引用 4 楼 jeremylai 的回复:
[quote=引用 3 楼 qq2460857094 的回复:] [quote=引用 2 楼 jeremylai 的回复:] [quote=引用 1 楼 qq2460857094 的回复:] 既然是使用SVG的，那就是支持HTML的，可以使用transform对图片进行缩放。动态改变transform的值就行了。 或者SVG图片使用绝对定位，然后改变图片的大小也可以。
我现在需要的是通过滚动条来改变整个svg的大小动态改变是不行的[/quote] 滚动条也可以，通过判断滚动条的位置来动态设置SVG的大小[/quote] 我的意思是设置只能中心缩放，不能改其他的[/quote] CSS3的tramsform是可以设置绽放的中心点的。
jeremylai 2016-07-16
  • 打赏
  • 举报
回复
引用 3 楼 qq2460857094 的回复:
[quote=引用 2 楼 jeremylai 的回复:] [quote=引用 1 楼 qq2460857094 的回复:] 既然是使用SVG的，那就是支持HTML的，可以使用transform对图片进行缩放。动态改变transform的值就行了。 或者SVG图片使用绝对定位，然后改变图片的大小也可以。
我现在需要的是通过滚动条来改变整个svg的大小动态改变是不行的[/quote] 滚动条也可以，通过判断滚动条的位置来动态设置SVG的大小[/quote] 我的意思是设置只能中心缩放，不能改其他的
qq2460857094 2016-07-14
  • 打赏
  • 举报
回复
既然是使用SVG的，那就是支持HTML的，可以使用transform对图片进行缩放。动态改变transform的值就行了。 或者SVG图片使用绝对定位，然后改变图片的大小也可以。
qq2460857094 2016-07-14
  • 打赏
  • 举报
回复
引用 2 楼 jeremylai 的回复:
[quote=引用 1 楼 qq2460857094 的回复:] 既然是使用SVG的，那就是支持HTML的，可以使用transform对图片进行缩放。动态改变transform的值就行了。 或者SVG图片使用绝对定位，然后改变图片的大小也可以。
我现在需要的是通过滚动条来改变整个svg的大小动态改变是不行的[/quote] 滚动条也可以，通过判断滚动条的位置来动态设置SVG的大小
jeremylai 2016-07-14
  • 打赏
  • 举报
回复
引用 1 楼 qq2460857094 的回复:
既然是使用SVG的，那就是支持HTML的，可以使用transform对图片进行缩放。动态改变transform的值就行了。 或者SVG图片使用绝对定位，然后改变图片的大小也可以。
我现在需要的是通过滚动条来改变整个svg的大小动态改变是不行的
Svg 滚轮 缩放 实现
网上找了好久 Svg 的滚轮 缩放 ，没有找到，自己就实现了一个
SVG 对象绕着坐标中心实现旋转 缩放 平移
解决 svg 对象，位置有偏移量时旋转 缩放 会产生偏移。绕着坐标（x,y）中心，原点 旋转 缩放 平移
svg 拖拽 缩放 .zip
利用jquery写的 svg 的平移脱拽鼠标 缩放 ，简单易懂，里面有完整的实现逻辑和页面展示，其中前两个页面是测试页面，最后一个可以实现拖拽和 缩放 的是最终页面
svg 在移动端的应用-手势图片拖动，手势放大缩小
svg 在移动端的应用-手势图片拖动，手势放大缩小，比较方便
基于h5+ svg 制作的自定义地图实现拖拽、 缩放 、鼠标覆盖等事件
基于h5+ svg 制作的自定义地图实现拖拽、 缩放 、鼠标覆盖等事件.h5+ svg 的一些小demo有助于初学者
JavaScript 87,970 224,682

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
 
推荐文章
纯真的丝瓜  ·  小米生态链全新品牌发布：MIJIA米家 - 知新报 - 乐享派
2 月前
刀枪不入的皮带  ·  全国优秀大学生夏令营持续开放申请 | 医学院2024级研究生项目招生 | 医学院硕博项目
4 月前
刚分手的哑铃  ·  A new accessibility strategy for the GOV.UK Design System – Accessibility in government
4 月前
欢快的匕首  ·  高甜广播剧公园之夜_光·遇
6 月前
高大的桔子  ·  搜索关键字拼音智能提示实现_mongo可以根据拼音搜索中文吗-CSDN博客
6 月前
Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
link管理 - 链接快照平台