SVG круг с обводкой, у которой градиент - PullRequest
Новая
       8

SVG круг с обводкой, у которой градиент

0 голосов
/ 03 мая 2018

ниже то, что у меня есть. Единственное, что мне нужно, это чтобы верх был наполнителем. Таким образом, 12 часов должно быть заполнением, а 6 часов должно заканчиваться градиентом.

Какой лучший способ добиться этого? (Идея состоит в том, чтобы оживить это так, чтобы оно вращалось на следующем шаге.)

Codepen 

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

1 Ответ

0 голосов
/ 03 мая 2018

Мне удалось решить это самостоятельно.

Я прибег к клипу, и в моем случае это сработало:

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