Как создать svg-градиент с 3 точками в треугольнике, которые смешиваются вместе

#html #css #svg #градиент #svg_animation

Я хочу создать svg-градиент в круге с 3 цветными зонами, в виде треугольников.   

   




Я попытался создать линейный градиент с тремя stops, но я не уверен, как расположить
stops там, где они мне нужны (вверху слева направо). 
    

Ответы

Ответ 1

В качестве бонуса добавлены примеры анимации


Вращение градиента 


Добавляется команда анимации группы элементов id="gr1" :

circle cx="50" cy="50" r="5" fill="white" stroke="silver">
     
       


Полный код:









2. Анимация дорожек 

Добавляется команда анимации радиуса окружностей 


     
     








Ответ 2

В примере ниже близко, то, что вы хотите получить. 



svg {
  width: 400px;
}





Поскольку смешивание, которое вы получаете в CSS / SVG, работает исключительно путем
отдельного сочетания красного, зеленого и синего каналов цветов RGB, то он не знает,
что мы ожидаем увидеть зеленый, когда мы смешиваем синий и желтый. Вместо этого вы
получите мутный серый.   

Таким образом, в приведенном выше примере я «обманул», добавив полоски «правильных»
цветов между нашими тремя основными цветами. Например, я положил полоску зеленого цвета
между синим и желтым секторами.  

Если я этого не сделаю, приведенный выше пример будет выглядеть так:  



svg {
  width: 400px;
}