svg基础变形: transform 之 rotate

马黑黑

svg基础变形: transform 之 rotate

svg变形中的旋转 rotate，和CSS原理一致，但是表达方式大不相同。svg的transform属性中，rotate需要两个参数，角度和基点坐标，表示为 transform="rotate(deg, x y)"，其中，deg是角度，x和y分别是旋转的XY坐标值，例如，rotate(45, 100 100) 表示，旋转45度，旋转基点为基于svg画布的坐标点{100,100}。CSS中，旋转基点另外使用 transform-origin 设定。

旋转基点通常总是根据需要设定，我们做帖的系列音频播放器中，很多用旋转的东东做按钮，需要将旋转基点设为按钮的中心，我们就以旋转对象的中心为基点，设计下例代码：橄榄色矩形、海军蓝矩形和红色矩形的位置、宽高一模一样，橄榄色矩形以自身中心为基点旋转四十五度，红色矩形也旋转四十五度但不设置旋转基点（默认值0 0）：

<svg width="200" height="160" style="border: 1px solid gray;">
	<rect x="15" y="15" width="70" height="70" fill="olive" />
	<rect x="15" y="15" width="70" height="70" transform="rotate(45,50 50)" fill="navy" />
</svg>

下面是效果，可以看出，红色矩形旋转后移位了，原因是它绕着基于svg画布的 0 0 即左上角坐标点旋转。

设置红色矩形旋转基点为矩形中心{50,50}

可以勾选上面的复选框，尝试将红色矩形的旋转基点设为矩形的中心，看看发生什么；取消勾选按钮，则恢复初始旋转基点{0,0}。

【附】rotate 基点缺失时如何让元素旋转后停在原位

下面是代码和效果（圆点即circle元素作参照用）：

<svg width="200" height="200" style="border: 1px solid gray;">
	<rect
		x="20"
		y="20"
		width="80"
		height="80"
		transform="translate(60 60) rotate(45) translate(-60 -60)"
		fill="olive"
	/>
	<circle cx="60" cy="60" r="4" fill="red" />
</svg>

红色文本代码是关键所在：矩形的圆心在svg画布的 {60,60} 处，我们先用 translate(60 60) 将矩形位移，旋转之后，再用 translate(-60 -60) 反方向回来。实现原理和我们许久以前介绍过的此类CSS的妙法一样。

最后小结一下：svg的transform属性，rotate旋转默认以画布的{0,0}即左上角为旋转基点，若需要设置旋转基点，使用 (角度, x坐标 y坐标) 的方式进行，xy坐标参照svg画布坐标体系。当需要设置元素自身的中心为旋转基点时，所取的xy坐标值是元素中心相对于svg画布的坐标值。

红影

前面一个好理解，直接放上角度和图形中心，后面一个挺难理解的，用transform="translate(60 60) rotate(45)"去试了试，转到了红点点的正下方，想移回来还挺难，这样连续移动、旋转、再移动。倒是能回来了。很奇怪。

红影

红影 发表于 2023-11-17 23:21
前面一个好理解，直接放上角度和图形中心，后面一个挺难理解的，用transform="translate(60 60) rotate(45) ...

我没说清楚，也就是
transform="translate(60 60) rotate(45) "的情况下，旋转后的图像在红点正下方，
所以觉得后面的平移不应该是translate(-60 -60)，而是translate的x不动只移y的一个负值，实际却不是这样。没弄明白怎么回事。

马黑黑

红影 发表于 2023-11-17 23:21
前面一个好理解，直接放上角度和图形中心，后面一个挺难理解的，用transform="translate(60 60) rotate(45) ...

这个其实好理解的：相当于转换了坐标系

马黑黑

红影 发表于 2023-11-17 23:31
我没说清楚，也就是
transform="translate(60 60) rotate(45) "的情况下，旋转后的图像在红点正下方，
...

transform 的 translate 和 rotate 配套使用所产生的的效果是很奇妙的，会出乎我们的意料之外。但有原理在里面，只是较难描述，记住这个就好：位移加旋转会导致运动对象围绕基点（svg中这个基点在{0，0}处）转圈。形变组合有顺序，它们依次执行，但需要基点的形变属性（比如rotate）始终都围绕着基点进行。

你设计的 translate(60 60) rotate(45)，它就是形变组合，位移+旋转，这是要围绕基点转圈的，它的左上角坐标位{60，60}，就是那个顶角（它翻转了，左上角变为顶角）。这个时候，想要它回到原位的中心点，看着好像是竖直上移60像素就成，其实不然，这个 translate（0 -60）要加入前面的形变组合，变成第三个形变属性，始终要遵循 translate+rotate 的运行规则，即总是以原始基点{0，0}为绕圈中心，所以，第三个形变的位移必须是 {-60 -60}，矩形才会在原地旋转 45 度。

马黑黑

transform形变，形变基点是个重要因素。默认情况下：

CSS中，运动对象以自己的中心为形变基点。CSS可以通过设置 transform-origin 来改变形变基点。

svg中，运动对象以svg画布的左上角{0,0}为形变基点。张三就原地转个45度，转完后他不在原地了，因为他是绕着svg左上角旋转，变成了转了一个弧度。

svg可以通过设置，让形变基点也是绕着运动对象的中心进行，如果需要，以后我们也会介绍这个知识点。

红影

马黑黑 发表于 2023-11-17 23:53
这个其实好理解的：相当于转换了坐标系

“相当于转换了坐标系”

一言惊醒梦中人！
当我只取前两步，得到原坐标系下的结果，我仍然顺着这个思路去想它的位移，当然不对。除非全部做完后，不受旋转影响的情况下，另外完成位移，那已经是第三种方式了，变得更复杂。
第一种，最聪明，旋转时加入旋转角度和物体原点，通过内部设置，直接完成了绕原地旋转的过程。
第二种，应该算是把第一种的原理打开来显示的过程，那就是通过坐标平移到原点后再旋转，同时再反向平移，达到目的。
第三种，属于硬做的法子，即使不平移，旋转后，通过空间关系，仍能将矩形移动到原来的原地位置，这种很难找到规律，还是第一种的使用最好。感谢svg设计者的聪明。

红影

马黑黑 发表于 2023-11-18 08:14
transform 的 translate 和 rotate 配套使用所产生的的效果是很奇妙的，会出乎我们的意料之外。但有原理 ...

你说得对，第三个形变属性仍然在前面的形变组合中，并不是单单自身的形变。实际单单的形变也不是竖直上移60像素了，而是20加上那个正方形的交叉斜边，大概是56.56多。
即使开始不平移，直接基于svg画布的 0 0 旋转，通过原图形所在位置等空间关系，表面上仍然能弄回到原点，只是不能在旋转的后面加平移，这样仍是组合，跟单纯移动不一样。

红影

还好这个只是坐标平移。坐标系的变化包含平移和旋转，如果是坐标系自身的平移加旋转，再去找到新坐标系下的点，就太复杂了

红影

这个终于弄懂了，谢谢黑黑

马黑黑

红影 发表于 2023-11-18 09:15
还好这个只是坐标平移。坐标系的变化包含平移和旋转，如果是坐标系自身的平移加旋转，再去找到新坐标系下的 ...

那是的

马黑黑

红影 发表于 2023-11-18 09:12
你说得对，第三个形变属性仍然在前面的形变组合中，并不是单单自身的形变。实际单单的形变也不是竖直上移 ...

理解正确

马黑黑

红影 发表于 2023-11-18 08:55
“相当于转换了坐标系”

一言惊醒梦中人！

也可以理解为和ps加图层那样的原理：transform形变，相当于给svg加一个图层，这个图层拥有自己的坐标系统。

不过这只是相当，但是，形变之后，形变“图层”的虚拟坐标系统确实存在。

马黑黑

红影 发表于 2023-11-18 09:16
这个终于弄懂了，谢谢黑黑

svg形变比CSS的抽象得多，会令人困惑。

红影

马黑黑 发表于 2023-11-18 10:45
那是的

我记得那个计算公式还是比较复杂的，当然在cad系统里不算个事。

红影

马黑黑 发表于 2023-11-18 10:45
理解正确

我去画了一下，直观去看觉得挺清楚。

马黑黑

红影 发表于 2023-11-18 12:42
我去画了一下，直观去看觉得挺清楚。

是的，不过理解起来还需要自己体会

马黑黑

红影 发表于 2023-11-18 12:40
我记得那个计算公式还是比较复杂的，当然在cad系统里不算个事。

应该不太简单。cad已经封装好了所有可能出现的算法。

红影

马黑黑 发表于 2023-11-18 08:39
transform形变，形变基点是个重要因素。默认情况下：

CSS中，运动对象以自己的中心为形变基点。CSS可以 ...

“svg中，运动对象以svg画布的左上角{0,0}为形变基点。张三就原地转个45度，转完后他不在原地了，因为他是绕着svg左上角旋转，变成了转了一个弧度。”

问题是绕着左上角为几点转了45度后，距离左上角不再是15了，rect的定位是15 15，这才是费解的地方。

红影

马黑黑 发表于 2023-11-18 10:48
也可以理解为和ps加图层那样的原理：transform形变，相当于给svg加一个图层，这个图层拥有自己的坐标系统 ...

是的，和图层不完全相同。虽然这个说法更便于理解。