具有渐变尾部的笔划的 SVG 圆

Question

以下是我所拥有的。我唯一需要的是让顶部填充。所以 12 点钟它应该是一个填充，广告 6 点钟它应该以渐变结束。

实现这一目标的最佳方法是什么？（这个想法是让它在下一步中旋转。）

代码笔

    <div id="container">
  <svg idq="svg-spinner" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <defs>
        <linearGradient id="grad1" x1="0.01" y1="0.1">

            <stop offset="0" stop-color="#fff"></stop><stop offset="50%" stop-color="#fff" stop-opacity="0"></stop>
        </linearGradient>
    </defs>

    <circle cx="50" cy="50" r="40" stroke="url(#grad1)" stroke-width="10" fill="none"></circle>
</svg>
  </div>
</div>

Answer 1

我设法自己解决了。

我求助于剪辑路径，在我的情况下效果很好：

       <div id="container">
      <svg id="svg-spinner" width="100" height="100">
        <defs>
          <clipPath id="cut-off">
          <rect x="0" y="50" width="100" height="100" />
        </clipPath>
            <linearGradient id="gradient">
                <stop offset="0" stop-color="#59b189"></stop>
                <stop offset="75%" stop-color="#59b189" stop-opacity="0"></stop>
            </linearGradient>
        </defs>
        
        <circle cx="50" cy="50" r="40" stroke="#eff8f3" stroke-width="10" fill="none" opacity="1"></circle>
        <circle cx="50" cy="50" r="40" stroke="url(#gradient)" stroke-width="10" fill="none" clip-path="url(#cut-off)"></circle>
    </svg>
    </div>
    </div>