rotate理解是否正确？
SVG属性的transform声明的中心变换坐标是不能共享的
因此，虽然transform="rotate(45 100 50)"是中心点旋转，但是，后面再添加其他东西，例如：rotate(-45)则偏移值忽略，终中心点还是SVG的左上角(0,0)位置
transform="rotate(45 100 50)"等同于transform="translate(100 50) rotate(45) translate(-100 -50)"？
备注：
rotate可以多个值并存，中间用逗号或空格分隔，如：transform="rotate(45, 90 75) rotate(-45)"
无论跟随有多少值，都是从第一个开始，一个一个往后执行
每个值都有固定的坐标原点，都会追寻自己的坐标原点，来发生变形
书写rotate值时，要注意每个值的坐标可能是不同的地方，每一次写都要理清楚它的坐标原点在哪里
老师下划线部分麻烦再讲解下，课程老师没有围绕案例来讲比较绕，其它内容理解是否有偏颇，麻烦一并看下，谢谢
2
收起
正在回答
3回答
同学你好！
是以长方形的中心点来旋转的，至于为什么在画布外：
（1）在没有设置translate之前，矩形的起点在这里：
（2）经过translate（400 200）之后，坐标的原点到了（400 200），重新绘制矩形
（3）rotate（45）坐标轴旋转 重新绘制矩形：
画的不标准，同学可以参考着看看
如果帮助到了你 欢迎采纳 祝学习愉快~
慕前端5517794
2019-04-29 18:30:11
<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg"> <rect x="200" y="100" width="400" height="200" transform="translate(400 200) rotate(45)"> </svg> 400 200是以长方形的中心点来旋转，但为什么是在画布的外面，不是应该围绕中心点在画布内进行旋转吗？
transform="translate(400 200) rotate(45) translate(-400 -200)" 长方形会从画布外面移入矩形，并以长方形中心点旋转45度
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星