画一个 svg circle,带角度的
用 svg circle 画一个带角度的圆环
01 添加基本结构
代码如下
<svg viewBox="0 0 200 200">
<circle stroke="#d1d1d1" fill="none" stroke-width="3" cx="100" cy="100" r="80"></circle>
<circle
class="path"
stroke="hotpink"
fill="none"
stroke-width="5"
cx="100"
cy="100"
r="80"
style="stroke-dasharray: 502.655; stroke-dashoffset: 10; transition: stroke-dashoffset 0.3s ease-in-out"></circle>
</svg>
02 根据r,计算出周长
公式如下: 2 x PI x R,放到 stroke-dasharray: 502.655
中
这个值的含义是: 如果只有一个值,则画满对应的路径
实际: 2 * 3.1415 * 80 = 502.64
03 利用 offset 完成角度的变换
stroke-dashoffset
的含义是:
stroke-dashoffset
可以使上一步中使用stroke-dasharray
生成的「点」沿着 path 移动;- 想象一个足够长的「点」+ 足够长的「offset」。比如
stroke-dashoffset
设置成 1000,元素的描边就不会显示,上面的例子中,三个 circle 的stroke-dasharray
分别为 100,500,1000,stroke-dashoffset 都是 1000,配合 animation 从 1000 运动到 0; - circle 描边的「起始位置」在 circle 在 3 点钟方向,使用
transform: rotate()
逆时针旋转 90 度使「起始位置」定位到 12 点方向。
04 每一度的 dash-offset -> 360度圓环
每一度(deg)对应的 offset 是: 502.64/360
当 offset 为0 的时候: 环填满 circle
05 每一度的 dash-offset -> 0度圓环
当周长(dash-array) == (dash-offset) 的时候,则填充的环为空
06 常用 circle 的属性
属性列表
名称 | 值 | 备注 |
---|---|---|
stroke-dasharray | 502.655 | 对应圆的周长 |
stroke-dashoffset | 0 - 502.655 | 对应路径上的偏移量 |
stroke-width | 10 | 单位 line width 宽度 |
stroke | red/或者id | 颜色 |
r | 半径 | 圆的半径 |
stoke-linecap | 端点的形状 | |
transform="rotate(-90, 50, 50)" | 在路径上旋转
|