添加链接 注册    登录
link管理
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
踢足球的黑框眼镜  ·  Ruby 和 Python：有什么区别？ ...·  5 月前    · 
直爽的脸盆  ·  关键岗位计算机自适应测评·  5 月前    · 
耍酷的企鹅  ·  C罗之后，再无7号！C罗走后穿曼联7号球衣的 ...·  8 月前    · 
强悍的长颈鹿  ·  广东省卫生健康委员会网站·  1 年前    · 
发财的脆皮肠  ·  下列代码试图打印数字1-9的全排列组合__牛客网·  1 年前    · 
link管理  ›  svg如何设置中心点进行缩放-CSDN社区
动态 滚动条 svg transform
https://bbs.csdn.net/topics/391984175
冷冷的单杠
5 月前
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
社区管理员
 
推荐文章
踢足球的黑框眼镜  ·  Ruby 和 Python：有什么区别？ - New
5 月前
直爽的脸盆  ·  关键岗位计算机自适应测评
5 月前
耍酷的企鹅  ·  C罗之后，再无7号！C罗走后穿曼联7号球衣的都是何方神圣？_瓦伦西亚
8 月前
强悍的长颈鹿  ·  广东省卫生健康委员会网站
1 年前
发财的脆皮肠  ·  下列代码试图打印数字1-9的全排列组合__牛客网
1 年前
Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
link管理 - 链接快照平台