为加载指示器Spinner的描边应用radialGradient时出现显示问题

尝试实现下图的加载指示器，使用设计文件导出的SVG代码后，SVG能正常渲染，但描边的圆环完全看不到。

原导出SVG代码 #

<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 10.5C20 5.25329 15.7467 1 10.5 1C5.25329 1 1 5.25329 1 10.5C1 15.7467 5.25329 20 10.5 20" stroke="url(#paint0_angular_666_32)" stroke-width="2" stroke-linecap="round"/>
<defs>
<radialGradient id="paint0_angular_666_32" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.5 10.5) rotate(90) scale(9.5)"> 
<stop/> 
<stop offset="0.765625" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>

问题根源 #

1. 径向渐变的第一个<stop>未指定stop-color，浏览器无法识别渐变起始颜色，导致描边无内容
2. 导出的radialGradient（径向渐变）不符合效果图的线性淡出效果，应该用linearGradient（线性渐变）

修复后的代码 #

<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M20 10.5C20 5.25329 15.7467 1 10.5 1C5.25329 1 1 5.25329 1 10.5C1 15.7467 5.25329 20 10.5 20" 
        stroke="url(#paint0_linear)" 
        stroke-width="2" 
        stroke-linecap="round"/>
  <defs>
    <linearGradient id="paint0_linear" 
                    gradientUnits="userSpaceOnUse" 
                    x1="10.5" y1="1" x2="10.5" y2="20">
      <stop stop-color="#000"/> <!-- 可按需修改颜色 -->
      <stop offset="0.765625" stop-opacity="0"/>
    </linearGradient>
  </defs>
</svg>

修复说明 #

• 替换radialGradient为linearGradient，并设置垂直方向的渐变坐标，匹配圆环的淡出走向
• 给第一个<stop>添加明确的stop-color，让浏览器能解析渐变
• 简化渐变定义，用x1/y1/x2/y2直接指定方向，更易维护

如果需要让指示器旋转起来，可给<path>添加动画：

<path d="M20 10.5C20 5.25329 15.7467 1 10.5 1C5.25329 1 1 5.25329 1 10.5C1 15.7467 5.25329 20 10.5 20" 
      stroke="url(#paint0_linear)" 
      stroke-width="2" 
      stroke-linecap="round"
      style="animation: spin 1s linear infinite"/>
<style>
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

内容的提问来源于stack exchange，提问作者Hussam Khatib