画一个 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 的含义是: 

  1. stroke-dashoffset 可以使上一步中使用 stroke-dasharray 生成的「点」沿着 path 移动；
  2. 想象一个足够长的「点」+ 足够长的「offset」。比如 stroke-dashoffset 设置成 1000，元素的描边就不会显示，上面的例子中，三个 circle 的 stroke-dasharray 分别为 100，500，1000，stroke-dashoffset 都是 1000，配合 animation 从 1000 运动到 0；
  3. 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-dasharray502.655对应圆的周长
stroke-dashoffset0 - 502.655对应路径上的偏移量
stroke-width10单位 line width 宽度
strokered/或者id颜色
r半径圆的半径
stoke-linecap端点的形状
transform="rotate(-90, 50, 50)"

在路径上旋转

  • 参数1: -90 逆时针90度
  • 参数2: cx
  • 参数3: cy
svg circle