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

#css #svg #frontend

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


    

Ответы

Ответ 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);
    }
    


Ответ 2

Возможно заинтересует такое решение...
есть такая библиотека  D3JS (Data-Driven Documents)
она позволяет реализовывать красивые вещи, в том числе и вашу задачу
расширяя возможности SVG:








  
  
  




и статический вариант:








  
  
  



а вот без D3 сложность с нелинейным градиентом
(вдоль окружности)










есть идеи?
хотя автору уже хватило и предыдущих 2-х ответов, хотя с градиентом явно вопрос не решён.

Update 1:

Выше были примеры с постоянным размером секторов диаграммы  изменялся только их цвет
и не всегда это хорошо, вот еще вариант с переменным размером секторов (их количество
в этом примере одинаково, зависит от разрешения)
теперь по краям значений уменьшение размера секторов сохраняет плавность цвета и
разрешение настраивается отдельно т.е. не зависит от количества данных
а саму модель круговой диаграммы теперь просчитывает D3 через генератор формы
круговой диаграммы Pie.



-





  
  
  




Кстати, подобный вопрос поднимался тут


Ответ 3

Если нужна статическая картинка, без динамической смени оранжевого круга, то я сделал
бы вот так:

1.Рисуем 2 круга при помощи circlarc.svg -  сначала полный круг, потом маленькую часть.
 2. Добавляем каждому градиент (например angryTools).


  можно было легко менять от 0 до 100%


У меня ушло менее минуты.