svg06——svg中坐标变换与顺序的关系
一、什么是坐标变换
- 在svg中，
坐标变换是对一个坐标系到另一个坐标系的变换的描述 - 在上一篇中我们说到: transform 是
基于前驱坐标系的自身坐标系变换
坐标系 与 其前驱坐标系 都变换时，顺序不同有怎样的影响二、坐标变换与顺序的关系（坐标系与前驱坐标系） 1、坐标系与前驱坐标系都做
平移
g 先 translate(50, 0)，rect 再 translate(0, 50) ：
文章图片
g 先 translate(0, 50)，rect 再 translate(50, 0)
文章图片
前驱坐标系与自身坐标系都做
平移 变换时，对自身坐标系来说 结果是一样的
2、坐标系与前驱坐标系都做 旋转
g 先 rotate(30)，rect 再 rotate(15)
文章图片
g 先 rotate(15)，rect 再 rotate(30)
文章图片
前驱坐标系与自身坐标系都做
旋转 变换时，对自身坐标系来说 结果是一样的
3、坐标系与前驱坐标系做 一次平移 一次旋转
g 先 translate(0, 50)，rect 再 rotate(30)
文章图片
g 先 rotate(30)，rect 再 translate(0, 50)
文章图片
我们发现了不同！为了看的清楚，我手绘了变换过程 尺寸不准，见谅！阴影部分就是上面截图中矩形的效果
文章图片
重要：rect 的任何变换都是基于
已经变换了的 g 的坐标系
三、如果是同一图形的两个变换改变顺序呢？
1、值得说的是：svg中的 transform，是可以链式书写的，依次调用例如：下图中可以看出，两次
translate(0, 50) 变换都是生效的，进行了叠加
文章图片
2、通过分析我们不难得知，同一图形：
连续多次平移交换位置，结果是相同的连续多次旋转交换位置，结果是相同的
先平移再旋转：
文章图片
先旋转再平移：
文章图片
大家肯定都猜到了这个结果，原理其实和上面描述的是一致的，区别是两次变换都在自身坐标系而已。 所以后面同时进行平移旋转的时候，一定要注意顺序的影响哦~
【svg06——svg中坐标变换与顺序的关系】kk...周五啦，周末愉快哦
推荐阅读
- 急于表达——往往欲速则不达
- 慢慢的美丽
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 2019-02-13——今天谈梦想（）
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- Ⅴ爱阅读，亲子互动——打卡第178天
- 低头思故乡——只是因为睡不着
- 取名——兰
- 每日一话（49）——一位清华教授在朋友圈给大学生的9条建议
- 广角叙述|广角叙述 展众生群像——试析鲁迅《示众》的展示艺术