如何设置SVG圆形描边从12点钟（270度）开始逆时针绘制

刚好做过类似的需求，我来给你拆解实现思路和关键细节：

核心原理 #

SVG圆形的默认描边起始点在3点钟位置（0度），方向是顺时针。要实现从12点钟（270度）开始逆时针增长，我们需要通过两个关键操作调整：

1. 用rotate变换把圆形的起始点转到12点钟方向
2. 利用stroke-dasharray控制描边长度，此时变换后的“顺时针”描边在视觉上就是逆时针方向

分步实现 #

• 步骤1：确定圆形周长
  先计算圆形的周长，公式是2 * π * r。示例中半径r=25，周长≈157.08，示例里用158是近似值，不影响效果。

• 步骤2：添加背景圆环
  先画一个完整的灰色圆环作为底色，用stroke-dasharray: 158让整个圆环显示：

  <circle cy="38" cx="50" r="25" style="stroke-dasharray: 158;fill: none; stroke-width: 7; stroke: #5c5c5c;"></circle>
  

• 步骤3：添加可增长的进度圆环
  画第二个圆形，通过transform="rotate(270 50 38)"把它的起始点转到12点钟（50 38是圆心坐标，旋转时以圆心为原点）。然后用stroke-dasharray控制显示长度：

  <circle cy="38" cx="50" r="25" style="stroke-dasharray: 52.666666666666664 158;fill: none; stroke-width: 7; stroke: #05c189;" transform="rotate(270 50 38)"></circle>
  

  • stroke-dasharray的第一个值是当前显示的描边长度（示例中是周长的1/3），第二个值是总周长
  • 当你增大第一个数值时，描边会沿逆时针方向延伸（因为圆形被旋转了270度，原顺时针方向相对于画布就是逆时针）

完整示例代码 #

<svg width="100" height="76">
  <!-- 背景灰色圆环 -->
  <circle cy="38" cx="50" r="25" style="stroke-dasharray: 158;fill: none; stroke-width: 7; stroke: #5c5c5c;"></circle>
  <!-- 绿色进度圆环：从12点开始逆时针增长 -->
  <circle cy="38" cx="50" r="25" style="stroke-dasharray: 52.666666666666664 158;fill: none; stroke-width: 7; stroke: #05c189;" transform="rotate(270 50 38)"></circle>
</svg>

内容的提问来源于stack exchange，提问作者krishna ganisetti