Блог

Главная - Вопросы по программированию - Объединить два SVG LinearGradient

Объединить два SVG LinearGradient

#html #svg #linear-gradients

#HTML #svg #линейные градиенты

Вопрос:

Как я могу объединить два градиента с SVG?

Один слева направо,

один сверху вниз

Я хочу что-то вроде этого:

Пример:

color range 1 : (100,100,0) to (150,150,0)

color range 2 : (0, 0, 50) to (0,0,130)

Я хочу отобразить все возможные комбинации (цветовой диапазон 1 цветовой диапазон 2) Возможно ли это?

Комментарии:

1. вы можете попробовать использовать 2 перекрывающихся прямоугольника, каждый с одним градиентом

Ответ №1:

Как я уже прокомментировал, вы можете попробовать использовать 2 перекрывающихся прямоугольника, каждый с одним градиентом.

Наблюдение: в css первое изображение остается поверх второго. В SVG второй прямоугольник остается поверх первого. Итак, в SVG вам нужно изменить порядок.

 #div,svg{
  height:40vh;
  width:90vw;
  border:solid;
  margin:.5em;
}

#div{
  background:linear-gradient(0deg, rgba(255,0, 0 ,.8), rgba(255,0, 0 ,0)),
             linear-gradient(90deg, rgba(0,255,0,.8), rgba(0,255, 0 ,0))
} 
 <div id="div"></div>

<svg viewBox="0 0 100 100" preserveAspectRatio="none">
  
<linearGradient id="lg1"  y1="100%" y2 = "0%" x2="0%">
     <stop offset = "0%" stop-color = "rgba(255,0, 0 ,.8)" />
     <stop offset = "100%" stop-color = "rgba(255,0, 0 ,0)" />
</linearGradient>
<linearGradient id="lg2"  x1="0%" x2 = "100%" >
     <stop offset = "0%" stop-color = "rgba(0,255, 0 ,.8)" />
     <stop offset = "100%" stop-color = "rgba(0,255, 0 ,0)" />
</linearGradient>
  <rect width="100" height="100" fill="url(#lg2)"/>
  <rect width="100" height="100" fill="url(#lg1)"/>  
</svg>

Метки: