结合两个 SVG LinearGradient答案

【问题标题】：Combine two SVG LinearGradient结合两个 SVG LinearGradient
【发布时间】：2021-05-02 04:29:21
【问题描述】：

如何将两个渐变与 SVG 结合起来？

从左到右一个，

从上到下一个

我想要这样的东西：

例子：

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

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

我想显示所有可能的组合（颜色范围 1 + 颜色范围 2）这可能吗？

【问题讨论】：

你可以尝试使用两个重叠的矩形，每个矩形都有一个渐变

标签： html svg linear-gradients

【解决方案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>

【讨论】：

谢谢你______________________________________