JS操作svg图形缩放有误差值

新手上路,请多包涵

问题描述

我在开发一个svg的编辑器网页版,目前在做缩放的内容是,发现JS操作svg的时候 缩放会有误差
原理是 每个图形有个外框 我拉伸外框 然后用拉伸后的外框宽或者高去除以拉伸前的宽或者高,得到拉伸了多少这个倍率,然后将倍率赋值给svg的scale(x,y)属性

问题出现的环境背景及自己尝试过哪些方法

用的是谷歌浏览器,目前不考虑其他浏览器的兼容,试过调整过缩放比例 还是没用

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
zx = sr.getBBox().width/d.width, zy = sr.getBBox().height/d.height;//缩放比例
//d就是拉伸前的外框
stD1.setAttribute('transform','translate('+(stD1.getBBox().x+stD1.getBBox().width)

                        +','+(stD1.getBBox().y+stD1.getBBox().height)+')'
                        +' scale('+zsx+','+zsy+') '
                        +'translate('+-1*(stD1.getBBox().x+stD1.getBBox().width)+','
                        +-1*(stD1.getBBox().y+stD1.getBBox().height)+')');

//给指定SVG图形设置scale值

你期待的结果是什么?实际看到的错误信息又是什么?

本以为我拉伸了多少 就会缩放多少,看起来里面的图形和我的外框的距离是恒等的,但是目前,我对外框进行拉伸后,里面的图形的宽高虽然也按比例缩放了,但是会越来越小,导致图形不在外框的相对位置

阅读 2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题