html - Combine two SVG LinearGradient

Question

How can I combine two gradients with SVG?

One from left to right,

one from top to bottom

I want something like this:

Example:

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

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

I want to display every possible combination ( color range 1 + color range 2) Is that possible?

question from:https://stackoverflow.com/questions/65934383/combine-two-svg-lineargradient

Answer 1

As I've commented you can try to use 2 overlapped rectangles each with one gradient.

Observation: in css the first image stays on top of the second. In SVG the second rect stays on top of the first. So in SVG you need to reverse the order.

#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>