@miniven

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

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

https://jsfiddle.net/6u922gh5/1/
  • Вопрос задан
  • 598 просмотров
Пригласить эксперта
Ответы на вопрос 3
@GreatRash
Вы реализуете заливку при помощи линейного градиента (linear gradient), а вам нужен угловой градиент (angle gradient) или иногда его называют конический градиент (conic gradient). На сколько я знаю SVG, CSS, и прочие канвасы его делать не умеют, потому что W3C никак не могут договориться по каким формулам его считать.

Попробуйте погуглить: вероятно его можно как-то через одно место эмулировать, но лично я бы в продакшн не стал кривые решения тащить, проще договориться с дизайнером о переделке диаграммы.
Ответ написан
Комментировать
Возможно не в тему, но тут 2018newyear.ru - счетчик вверху с градиентом, может получится сделать по подобию как вам надо?
Ответ написан
Комментировать
vivazzi
@vivazzi
Веб-разработчик Python/Django (CMS, Shop)
В простейшем случае можно сделать так: строятся две дуги, соединённые между собой. Далее создаём два градиента: от 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
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы