请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
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>
上例的红色代码，就是旋转指令：transform 是二维转换属性，等号后面是旋转即 rotate 方法，rotate 带三个参数，缺一不可，第一个值是角度，正数时是顺时针旋转，负数时是逆时针旋转，后两位数是旋转的基点，我们这里以 svg 的中心、也是矩形的中心做基点。
旋转在很多场景都会用到，最常见的是时钟的指针。时钟指针是一根线，我们要考虑的是旋转的基点，例如下面这根线：
<svg width="200" height="200"> <line id="hand" x1="100" y1="100" x2="100" y1="10" stroke="red" /> </svg>
假设我们要让红线旋转，则它的基点应该设在线的底端，就是 x1 和 y1 的值（100,100）。
时钟指针需要用 JS 驱动。JS设置 svg 元素的一些属性值，可以用 setAttribute('属性名称', '属性值') 来实现。以上面的 line 为例，它的id是hand，则：
hand.setAttribute('transform', 'rotate(90, 100, 100)');
如此，红线就会指向三点钟方向。
| 
发表于 2022-9-9 23:00
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-9-10 09:36
楼主