Как сделать градиент элементу <cricle/> в <svg>

185

06 октября 2018, 08:40

Вопрос мой состоит в том, что нужно чтобы оранжевая полоса стала как на картинке

Проблема в том, что как бы я не вставлял градиент, он попросту не применяется, а с svg я знаком очень плохо и не могу найти причину и сделать так, как нужно. Может кто поможет с этим? Так же, это эдакий progress bar, который будет заполнятся постепенно, если кто знает, скажите, возможно я делаю что-то неправильно?

.gradient { 
  background-image:  
  linear-gradient(to left, #0065ff 0%, #733adc 100%); 
 
} 
.stp1 { 
  stop-color: #0065ff; 
} 
.stp2 { 
  stop-color: #733adc; 
} 
.progress-bar { 
  width: 200px; 
  height: 200px; 
}

<svg viewbox="0 0 200 200" class="progress-bar"> 
 <circle r="80" cx="100" cy="100" fill="none" stroke-width="12" stroke="#ccc"/> 
 <circle r="80" cx="100" cy="100" fill="none" stroke-width="12" stroke="orangered" 
			stroke-linecap="round" stroke-dasharray="406 502.4" 
			stroke-dashoffset="-20" class="gradient" 
			fill="url(#linear-gradient)" /> 
<text x="100" y="125" font-family="Arial" font-size="70" 
      text-anchor="middle" fill="#444"> 
      75 
      </text> 
     <defs> 
      <linearGradient id="linear-gradient"> 
            <stop offset="0%" class="stp1"/> 
            <stop offset="100%" class="stp2"/> 
      </linearGradient> 
    </defs> 
					     
</svg>

Answer 1

Оказывается я ошибся в одном из параметров по незнанию SVG, вам просто стоит задать градиент через <linearGradient> и в атрибуте stroke у полосы прогресса (которая и будет цветной) указать url градиента

.gradient { 
  background-image:  
  linear-gradient(to left, #0065ff 0%, #733adc 100%); 
 
} 
.stp1 { 
  stop-color: #0065ff; 
} 
.stp2 { 
  stop-color: #733adc; 
} 
.progress-bar { 
  width: 200px; 
  height: 200px; 
}

<svg viewbox="0 0 200 200" class="progress-bar"> 
 <circle r="80" cx="100" cy="100" fill="none" stroke-width="12" stroke="#ccc"/> 
 <circle r="80" cx="100" cy="100" fill="none" stroke-width="12" stroke="url(#linear-gradient)" 
			stroke-linecap="round" stroke-dasharray="406 502.4" 
			stroke-dashoffset="-20" class="gradient" 
			fill="none" /> 
<text x="100" y="125" font-family="Arial" font-size="70" 
      text-anchor="middle" fill="#444"> 
      75 
      </text> 
     <defs> 
      <linearGradient id="linear-gradient"> 
            <stop offset="0%" class="stp1"/> 
            <stop offset="100%" class="stp2"/> 
      </linearGradient> 
    </defs> 
					     
</svg>