用户坐标系和最初坐标系
如果没设置cx和cy，旋转点究竟是元素的左上角还是画布的左上角，用户坐标系的原点是元素的左上角，难道元素是围绕自己的左上角旋转吗，我以为它是围绕最初坐标系的原点旋转啊。
如果设置了cx和cy，是从画布左上角偏移还是从元素自己的左上角偏移？
1
收起
正在回答 回答被采纳积分+1
3回答
卡布琦诺
2019-08-13 20:32:43
这里老师通过两个效果案例来帮你演示过程，帮助同学理解：
（1）不设置旋转中心
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background: #ccc;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<svg>
<!-- 绘制一个画布原点标志 -->
<circle r="2" cx="0" cy="0" fill="red" stroke-width="0"></circle>
<g id="rect2">
<!-- 绘制元素 -->
<rect x="10" y="10" width="50" height="50" fill="none"></rect>
<!-- 绘制一个元素旋转中心点标志 -->
<circle r="2" cx="30" cy="30" fill="#000" stroke-width="0"></circle>
</g>
<use xlink:href="#rect2" transform="rotate(0)" fill="none" stroke="#14F15D" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(15)" fill="none" stroke="red" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(30)" fill="none" stroke="blue" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(45)" fill="none" stroke="yellow" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(60)" fill="none" stroke="pink" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(75)" fill="none" stroke="green" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(90)" fill="none" stroke="purple" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(105)" fill="none" stroke="orange" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(120)" fill="none" stroke="brown" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(135)" fill="none" stroke="magenta" stroke-width="4" opacity="0.5"></use>
<!-- 设置旋转中心 -->
</svg>
</div>
</body>
</html>元素旋转效果如下图：
2、设置旋转中心
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background: #ccc;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<svg>
<!-- 绘制一个画布原点标志 -->
<circle r="2" cx="0" cy="0" fill="red" stroke-width="0"></circle>
<g id="rect2">
<!-- 绘制元素 -->
<rect x="10" y="10" width="50" height="50" fill="none"></rect>
<!-- 绘制一个元素旋转中心点标志 -->
<circle r="2" cx="30" cy="30" fill="#000" stroke-width="0"></circle>
</g>
<use xlink:href="#rect2" transform="rotate(0,30,30)" fill="none" stroke="#14F15D" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(15,30,30)" fill="none" stroke="red" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(30,30,30)" fill="none" stroke="blue" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(45,30,30)" fill="none" stroke="yellow" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(60,30,30)" fill="none" stroke="pink" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(75,30,30)" fill="none" stroke="green" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(90,30,30)" fill="none" stroke="purple" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(105,30,30)" fill="none" stroke="orange" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(120,30,30)" fill="none" stroke="brown" stroke-width="4" opacity="0.5"></use>
<use xlink:href="#rect2" transform="rotate(135,30,30)" fill="none" stroke="magenta" stroke-width="4" opacity="0.5"></use>
<!-- 设置旋转中心 -->
</svg>
</div>
</body>
</html>元素旋转效果如下图：
由此得出，当不设置旋转中心的时候，是根据画布的左上角（画布的圆点）进行旋转的
希望可以帮到你，同学也可以自己测试一点代码哦，如果还有疑问，可再次提问，祝学习愉快！
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星