svg中旋转元素

马黑黑 发表于 2022-9-9 23:00

svg支持整套CSS的二维变换，这意味着我们可以使用 transform 来旋转对象。事实上，在做圆环播放器时，我们已经用上了 rotate 方法将圆环逆转 90 度以便能让播放进度指示从12点钟方向开始。 
svg可以直接使用 transform 方法，例如下面的矩形，我们顺时针旋转 45 度： <svg width="200" height="200">     <rect x="50" y="50" width="100" height="100" stroke="olive" transform="rotate(45, 100, 100)" /> </svg>
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="olive" transform="rotate(45, 100, 100)"></rect>
</svg>
上例的红色代码，就是旋转指令：transform 是二维转换属性，等号后面是旋转即 rotate 方法，rotate 带三个参数，缺一不可，第一个值是角度，正数时是顺时针旋转，负数时是逆时针旋转，后两位数是旋转的基点，我们这里以 svg 的中心、也是矩形的中心做基点。 旋转在很多场景都会用到，最常见的是时钟的指针。时钟指针是一根线，我们要考虑的是旋转的基点，例如下面这根线： <svg width="200" height="200">    <line id="hand" x1="100" y1="100"  x2="100" y1="10" stroke="red" /></svg> 

<svg width="200" height="200" style="border:1px solid">
<line x1="100" y1="100" x2="100" y2="10" stroke="red"></line>
</svg>

 假设我们要让红线旋转，则它的基点应该设在线的底端，就是 x1 和 y1 的值（100,100）。 时钟指针需要用 JS 驱动。JS设置 svg 元素的一些属性值，可以用 setAttribute('属性名称', '属性值') 来实现。以上面的 line 为例，它的id是hand，则： hand.setAttribute('transform', 'rotate(90, 100, 100)'); 如此，红线就会指向三点钟方向。

梦缘发表于 2022-9-10 09:36

谢老师的代码分享讲解，祝老师双节高兴快乐！{:4_187:}

红影发表于 2022-9-10 09:45

通常旋转好像只要给出角度就行了，这个还需要给出圆点，更严密{:4_187:}

红影发表于 2022-9-10 09:47

这个有没有绕着X或Y轴的翻转？

马黑黑 发表于 2022-9-10 10:19

红影发表于 2022-9-10 09:47
这个有没有绕着X或Y轴的翻转？

svg没有rotateX 和 rotateY，它是基于2d的

马黑黑 发表于 2022-9-10 10:20

红影发表于 2022-9-10 09:45
通常旋转好像只要给出角度就行了，这个还需要给出圆点，更严密

旋转总是要有旋转基点的！

马黑黑 发表于 2022-9-10 10:20

梦缘发表于 2022-9-10 09:36
谢老师的代码分享讲解，祝老师双节高兴快乐！

谢谢

红影发表于 2022-9-10 17:13

马黑黑发表于 2022-9-10 10:19
svg没有rotateX 和 rotateY，它是基于2d的

哦哦，知道了。

红影发表于 2022-9-10 17:14

马黑黑发表于 2022-9-10 10:20
旋转总是要有旋转基点的！

记得以前就直接给个角度，若要设置基点，还要有一句代码，这个直接一起都设置了呢。

马黑黑 发表于 2022-9-10 17:20

红影发表于 2022-9-10 17:14
记得以前就直接给个角度，若要设置基点，还要有一句代码，这个直接一起都设置了呢。

不会的，要有 transform-origin，转换基点。我设计过一种由 rotate+translate 且元素绝对居中的无需设置基点的绕圆心运行的方案，它其实也是有基点的，只是基点由上述描述的方案确定。

马黑黑 发表于 2022-9-10 17:21

红影发表于 2022-9-10 17:13
哦哦，知道了。

但它的动画有很多方式，今天介绍的是 animateMotion，基于路径的。

红影发表于 2022-9-10 20:42

马黑黑发表于 2022-9-10 17:20
不会的，要有 transform-origin，转换基点。我设计过一种由 rotate+translate 且元素绝对居中的无需设置...

如果不设置基点，是绕着起点转的吧？

红影发表于 2022-9-10 20:43

马黑黑发表于 2022-9-10 17:21
但它的动画有很多方式，今天介绍的是 animateMotion，基于路径的。

还有很多种？一种都弄不清楚呢{:4_173:}

马黑黑 发表于 2022-9-10 21:23

红影发表于 2022-9-10 20:43
还有很多种？一种都弄不清楚呢

还挺多的，三五个动画指令也正常

马黑黑 发表于 2022-9-10 21:24

红影发表于 2022-9-10 20:42
如果不设置基点，是绕着起点转的吧？

是的。svg也一样。

红影发表于 2022-9-10 23:34

马黑黑发表于 2022-9-10 21:23
还挺多的，三五个动画指令也正常

哦哦，不过现在介绍的这个，命令语句和以前的相似，倒是容易理解。

红影发表于 2022-9-10 23:34

马黑黑发表于 2022-9-10 21:24
是的。svg也一样。

真好，这样挺统一的，省得以后弄混。

马黑黑 发表于 2022-9-11 07:34

红影发表于 2022-9-10 23:34
哦哦，不过现在介绍的这个，命令语句和以前的相似，倒是容易理解。

其实都是同源的，场景不同，语法、语句组织有所不同，原理还是万变不离其宗

红影发表于 2022-9-11 10:14

马黑黑发表于 2022-9-11 07:34
其实都是同源的，场景不同，语法、语句组织有所不同，原理还是万变不离其宗

设计出这些代码的人真不容易，能有这么多满足各种需求的代码呢。

马黑黑 发表于 2022-9-11 10:22

红影发表于 2022-9-11 10:14
设计出这些代码的人真不容易，能有这么多满足各种需求的代码呢。

是的

页: [1] 2

花潮论坛's Archiver

svg中旋转元素