Как реализовать круговую диаграмму?

Question

[miniven]

Задача -- сделать так: take.ms/VmE1K
Пытаюсь реализовать на SVG. Возникает проблема с индикатором прогресса: не могу сделать, чтобы цвет не уходил опять в прозрачный. Подскажите, как добиться такого эффекта? Может нужно в корне изменить подход?

https://jsfiddle.net/6u922gh5/1/

Comments

[vaskadogana]

d3js посмотрите у них фишек с svg много
вот пример похожий на вашу проблему цветами
color.method.ac

Answer 1

[GreatRash]

Вы реализуете заливку при помощи линейного градиента (linear gradient), а вам нужен угловой градиент (angle gradient) или иногда его называют конический градиент (conic gradient). На сколько я знаю SVG, CSS, и прочие канвасы его делать не умеют, потому что W3C никак не могут договориться по каким формулам его считать.

Попробуйте погуглить: вероятно его можно как-то через одно место эмулировать, но лично я бы в продакшн не стал кривые решения тащить, проще договориться с дизайнером о переделке диаграммы.

Answer 2

[Иван Иванов]

Возможно не в тему, но тут 2018newyear.ru - счетчик вверху с градиентом, может получится сделать по подобию как вам надо?

Answer 3

[Артём Мальцев]

В простейшем случае можно сделать так: строятся две дуги, соединённые между собой. Далее создаём два градиента: от 0 до 0.5 прозрачность и от 0.5 прозрачность до 1:

<defs>
    <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
      <stop offset="0%" stop-color="#f00808" stop-opacity="0"></stop>
      <stop offset="100%" stop-color="#f00808" stop-opacity="0.5"></stop>
    </linearGradient>
    
    <linearGradient id="gradient_2" x1="100%" y1="50%" x2="0%" y2="50%">
      <stop offset="0%" stop-color="#f00808" stop-opacity="0.5"></stop>
      <stop offset="100%" stop-color="#f00808" stop-opacity="1"></stop>
    </linearGradient>
  </defs>

И наконец, к первой дуге применяем 1 градиент, ко второй дуге - второй градиент.

Пример: https://codepen.io/vivazzi/pen/yEjxPV

Для анимации можно применить css свойство transform: rotate(15deg); или @keyframes