Question

以下是我所拥有的。我唯一需要的是让顶部成为填充物。所以12＆＃39; O时钟它应该是一个填充和广告6＆＃39; O时钟它应该以渐变结束。

实现这一目标的最佳方法是什么？（我的想法是设置动画，以便它在下一步中旋转。）

    <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

我设法自己解决了。

我采用了剪辑路径，在我的案例中效果很好：

Codepen

    <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>

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

1 个答案: