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

152

24 февраля 2021, 14:50

<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <defs> 
      <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> 
        <stop offset="0%" stop-color="red"/> 
        <stop offset="50%" stop-color="blue" /> 
        <stop offset="100%" stop-color="yellow"/> 
      </linearGradient> 
  </defs> 
    <circle cx="200" cy="200" r="100" fill="url(#gradient)"/> 
</svg>

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

<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="yellow"/>
      </linearGradient>
  </defs>
    <circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>

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

Answer 1

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

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

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

circle cx="50" cy="50" r="5" fill="white" stroke="silver">
     <animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360   50 50" repeatcount="indefinite"/>
   </circle>

Полный код:

<style> 
svg { 
  width: 400px; 
} 
</style> 
<svg viewBox="0 0 100 100"> 
  <defs> 
    <filter id="blur" color-interpolation-filters="linear" x="-25%" y="-25%" width="200%" height="200%"> 
      <feGaussianBlur in="SourceGraphic" stdDeviation="7"/> 
    </filter>  
    <mask id="circle"> 
      <circle cx="50" cy="50" r="50" fill="white"> 
	   
	   </circle> 
    </mask> 
  </defs> 
  <g id="gr1" mask="url(#circle)" filter="url(#blur)"> 
    <rect x="-10" width="110" height="110" fill="blue"/> 
    <rect x="50" width="60" height="110" fill="yellow"/> 
    <polygon points="50,50, 60,110, 40,110" fill="#0f8"/> 
    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/> 
    <polygon points="0,10, 50,50, 0,30" fill="#f0f"/> 
    <polygon points="100,10, 100,30, 50,50" fill="#f80"/> 
  </g> 
   <circle cx="50" cy="50" r="5" fill="white" stroke="silver"> 
     <animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360   50 50" repeatcount="indefinite"/> 
   </circle>	  
    
   </svg>

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

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

<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
     <animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
    </circle>

<style> 
svg { 
  width: 400px; 
} 
</style> 
<svg viewBox="0 0 100 100"> 
  <defs> 
    <filter id="blur" color-interpolation-filters="linear" x="-25%" y="-25%" width="200%" height="200%"> 
      <feGaussianBlur in="SourceGraphic" stdDeviation="7"/> 
    </filter>  
    <mask id="circle"> 
      <circle cx="50" cy="50" r="50" fill="white"> 
	    </circle> 
    </mask> 
  </defs> 
  <g id="gr1" mask="url(#circle)" filter="url(#blur)"> 
    <rect x="-10" width="110" height="110" fill="blue"/> 
    <rect x="50" width="60" height="110" fill="yellow"/> 
    <polygon points="50,50, 60,110, 40,110" fill="#0f8"/> 
    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/> 
    <polygon points="0,10, 50,50, 0,30" fill="#f0f"/> 
    <polygon points="100,10, 100,30, 50,50" fill="#f80"/> 
  </g> 
   <circle cx="50" cy="50" r="5" fill="white" stroke="silver"> 
     <animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360   50 50" repeatcount="indefinite"/> 
   </circle>	  
   <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" > 
     <animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" /> 
	</circle>  
  <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" > 
     <animate id="an2" attributeName="r" values="5;50" dur="2s" begin="0.5s" repeatcount="indefinite" /> 
   </circle>  
   <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" > 
     <animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1s" repeatcount="indefinite" /> 
   </circle>  
     <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" > 
     <animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1.5s" repeatcount="indefinite" /> 
   </circle>  
 <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" > 
     <animate id="an3" attributeName="r" values="5;50" dur="2s" begin="2s" repeatcount="indefinite" /> 
   </circle>   
   </svg>

Answer 2

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

svg { 
  width: 400px; 
}

<svg viewBox="0 0 100 100"> 
  <defs> 
    <filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%"> 
      <feGaussianBlur in="SourceGraphic" stdDeviation="9"/> 
    </filter> 
    <mask id="circle"> 
      <circle cx="50" cy="50" r="50" fill="white"/> 
    </mask> 
  </defs> 
  <g mask="url(#circle)" filter="url(#blur)"> 
    <rect x="-10" width="110" height="110" fill="blue"/> 
    <rect x="50" width="60" height="110" fill="yellow"/> 
    <polygon points="50,50, 60,110, 40,110" fill="#0f8"/> 
    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/> 
    <polygon points="0,10, 50,50, 0,30" fill="#f0f"/> 
    <polygon points="100,10, 100,30, 50,50" fill="#f80"/> 
  </g> 
   
</svg>

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

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

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

svg { 
  width: 400px; 
}

<svg viewBox="0 0 100 100"> 
  <defs> 
    <filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%"> 
      <feGaussianBlur in="SourceGraphic" stdDeviation="7"/> 
    </filter> 
    <mask id="circle"> 
      <circle cx="50" cy="50" r="50" fill="white"/> 
    </mask> 
  </defs> 
  <g mask="url(#circle)" filter="url(#blur)"> 
    <rect x="-10" width="110" height="110" fill="blue"/> 
    <rect x="50" width="60" height="110" fill="yellow"/> 
    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/> 
  </g> 
   
</svg>