Как нарисовать разукрашенный круг на svg?

271

14 октября 2017, 18:52

Как на svg нарисовать такой круг, чтоб его закрашенность оранжевым цветом можно было легко менять от 0 до 100% ? Пробовал на css подобное, но что-то не одно решение не подошло, а в свг я профан

Answer 1

Такой вот костыльный вариант. Изменять stroke-dashoffset от 0 (полностью оранжевый круг) до 564 (полностью синий). Вариант с процентами я не осилил, может и можно так сделать.

Код на codepen

    .circle { 
      cx: 60px; 
      cy: 60px; 
      r: 50px; 
      fill: #fff; 
      stroke: url(#linear-gradient); 
      stroke-width: 4px; 
    } 
 
    .circle2 { 
      cx: 61px; 
      cy: 60px; 
      r: 50px; 
      fill: transparent; 
      stroke: orange; 
      stroke-width: 4px; 
      stroke-dasharray: 564px; 
      stroke-dashoffset: 450px; 
      transform: rotate(-90deg) translateX(-121px); 
    }

    <svg> 
      <linearGradient id="linear-gradient"> 
        <stop offset="0%" stop-color="blue"/> 
        <stop offset="100%" stop-color="aliceblue"/> 
      </linearGradient> 
      <circle class="circle"></circle> 
      <circle class="circle2"></circle> 
    </svg>