Николай: Я знаю, что нужно сделать и постарался предельно ясно описать в описании вопроса, как должно все выглядеть. У меня есть дизайн, поставленная задача и я не обсуждаю здесь другие варианты, а спросил по существу.
50% заливки градиентного фона, который я приложил.
Итог таков: с помощью SVG такой тип градиента сделать нельзя, только radial и linear. Решения есть два:
- разбить на сотни секций по радиусу и заливать каждую цветом, имитируя градиент.
- использовать встроенную возможность svg с linear градиентом и изменять направление заливки в зависимости от процентного соотношения (подходит если используется не более 2х частей в графике)
Да, конечно, разделение подразумевается отступами между ними, как на первом скриншоте. Градиент должен плавно перетекать в каждую секцию, при этом отделенную отступом.
Да, можно пойти по такому пути и разбить на сотни сегментов, чтобы сделать что-то похожее, но это не тривиальная задача для svg и d3js такое не предусмотрено. Но в целом согласен, походу это один из немногих вариантов.
Было интересно, есть ли готовые библиотеки, которые могут предоставить такой график с градиентной заливкой.