如何让SVG进度条从9点钟方向逆时针转动并实现平滑渐变？

数据老陈

2026-7-15

实现从9点钟方向逆时针转动的SVG渐变进度条

以下是修改后的完整代码，解决了起始位置、转动方向和渐变过渡的问题：

<html>
  <head>
    <style>
      circle{
        fill: none;
        stroke: url(#GradientColor);
        stroke-width:20px;
        stroke-dasharray:435;
        stroke-dashoffset:435;
        animation: anim 2s linear forwards;
      }
      @keyframes anim {
        100%{
          stroke-dashoffset: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="progress">
      <div class="outter_circle">
        <div class="inner_circle">
          <div>HTML</div>
        </div>
      </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
      <defs>
        <linearGradient id="GradientColor" x1="100%" x2="0%">
          <stop offset="40%" stop-color="#6528F7" />
          <stop offset="100%" stop-color="#A076F9" />
        </linearGradient>
      </defs>
      <circle cx="80" cy="80" r="70" stroke-linecap="round" transform="rotate(-90 80 80) scaleX(-1)" />
    </svg>
  </body>
</html>

修改说明：

调整起始位置与转动方向：给<circle>添加transform="rotate(-90 80 80) scaleX(-1)"
- rotate(-90 80 80)：以圆心(80,80)为中心逆时针旋转90度，将进度条起始点从默认3点钟方向移到9点钟方向。
- scaleX(-1)：水平翻转圆形绘制方向，把默认顺时针绘制改为逆时针，实现从9点钟开始向左填充的效果。
修正渐变过渡方向：给<linearGradient>添加x1="100%" x2="0%"
- 圆形被水平翻转后，原渐变方向会颠倒，调整x1和x2的位置，能保持#6528F7到#A076F9的平滑过渡顺序。
保留原有平滑动画：原动画的linear时间函数和forwards填充模式已能保证进度条平滑过渡，无需额外调整。