svg的path能否实现真正的环形渐变？

Question

如demo所示的svg实现的环形进度条，实际上未能完全实现环形渐变，本质还是水平渐变，环形度数超过250度，就会体现出水平渐变。svg能否实现环形渐变？就像css的conic-gradient一样。因为conic-gradient会产生锯齿，所以才使用svg来实现，渐变效果不太理想。
关键代码

<div style="width:150px;height:150px">
  <svg width="100%" height="100%" class="progress" viewBox="0 0 100 100">
                <defs>
                    <linearGradient id="grad1">
                        <stop offset="0%" stop-color="#29D65A"></stop>
                        <stop offset="100%" stop-color="#b3eac3"></stop>
                    </linearGradient>
                </defs>
                <circle class="c1" cx="50%" cy="50%" r="45%" stroke="#eee" stroke-width="5" fill="none" stroke-linecap="round" stroke-dasharray="283"></circle>
                <path d="M 50 50 m 45 0 a 45 45 0 1 1 -0.08879722072777696 -2.825573378819097" fill="none" stroke="url(#grad1)" stroke-width="5" stroke-linecap="round"></path>
            </svg>
</div>

Answer 1

不能，SVG 只支持线性渐变和径向渐变。不过你可以使用 clipPath 和 foreignObject 配合 CSS 实现环形渐变：

My Struggle to Use and Animate a Conic Gradient in SVG

Answer 2

要在 SVG 中实现真正的环形渐变，可以使用 radialGradient 和 mask 的组合，但这仍然不完全等同于 CSS 的 conic-gradient。目前，SVG 规范中没有直接的圆锥渐变支持。但可以通过一些技巧和组合来模拟类似的效果。以下是一个示例，演示如何使用 radialGradient 和 mask 实现一个看起来像是环形渐变的进度条。

<div style="width:150px;height:150px">
  <svg width="100%" height="100%" viewBox="0 0 100 100">
    <defs>
      <!-- Define the radial gradient -->
      <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:#29D65A; stop-opacity:1" />
        <stop offset="100%" style="stop-color:#b3eac3; stop-opacity:1" />
      </radialGradient>

      <!-- Create a mask for the progress path -->
      <mask id="progress-mask">
        <path d="M50,50 m-45,0 a 45,45 0 1,1 90,0 a 45,45 0 1,1 -90,0" fill="none" stroke="white" stroke-width="5" stroke-dasharray="283" />
      </mask>
    </defs>

    <!-- Background circle -->
    <circle cx="50" cy="50" r="45" stroke="#eee" stroke-width="5" fill="none" />

    <!-- Gradient circle with mask applied -->
    <circle cx="50" cy="50" r="45" fill="url(#grad1)" mask="url(#progress-mask)" />
  </svg>
</div>

关键点解释
1.radialGradient 定义:

使用 radialGradient 来创建一个径向渐变。通过设置 cx, cy, r, fx, fy 属性，可以控制渐变的中心和焦点。
2.mask 创建:

使用 mask 创建一个遮罩，通过 path 来定义遮罩的形状。这里的 path 定义了一个圆形路径，用于遮罩径向渐变背景。

3.应用 mask:

将 mask 应用于一个具有径向渐变填充的 circle 元素，从而实现环形渐变效果。
注意事项
这种方法仍然不是严格意义上的圆锥渐变，但可以近似地实现环形渐变效果。
如果需要更复杂的渐变效果，可能需要更多的自定义 SVG 或者使用 JavaScript 动态生成渐变。
这样，您可以在不引入锯齿的情况下，实现一个看起来接近环形渐变效果的 SVG 进度条。