使用 SVG 的线性二色平滑和锐利渐变答案

【问题标题】：Linear two color smooth & sharp gradient using SVG使用 SVG 的线性二色平滑和锐利渐变
【发布时间】：2016-06-05 04:08:02
【问题描述】：

我尝试了所有 CSS 技巧来为我的body 标签制作如下线性渐变。

但是CSS渐变不锐利，所以我尝试了以下技巧，

<body><div class="bg"></div></body>

.bg{ 
  background-color:red; 
  width:3000px; 
  height:3000px;
  overflow:hidden
} 
.bg:before{ 
  left: 7%; 
  top:-20%; 
  width:100%; 
  height:100%; 
  transform:rotate(25deg) 
}

所以，我实现了绿色矩形。我现在可以看到明显的渐变了。

但我必须编写media 查询来调整每个尺寸的旋转。

我想如果我们可以在这个 div 上使用 SVG 从(0, 0) 到(body width, body height) 绘制一个三角形，我真的可以制作一个响应式线性渐变。

但我对 SVG 很陌生，如何使用 SVG 实现响应式反直角三角形？

简而言之，我想要一个响应式的两色smooth & sharp 渐变背景。

更新：

完整的css代码在这里。

div.bg {
  margin-top: -50px;
  position: fixed;
  height: 1500px;
  width: 3500px;
  overflow: hidden;
  background-color: @bg-gradient-color-1;
  background-size: cover;
  z-index: -999999;
}

.bg:before {
  content: '';
  position: fixed;
  width: 200%;
  height: 200%;
  background-color: @bg-gradient-color-2;
  z-index: -999999;
}

@media only screen and (min-width: 1320px) {
  .bg:before {
    left: 0%;
    top: -106%;
    transform: rotate(27deg);
  }
}

【问题讨论】：

什么，你的意思是这样的：colorzilla.com/gradient-editor/#ff070b+0,00db15+100 - 没有必要只为请求的渐变使用 svg
我试过了birdspider，它没有响应，并且不流畅地用于完整的body标签
您发布的代码实际上并没有做任何事情，只是创建了一个大的红色方块。而且您发布的图像根本没有显示“渐变”。也许你忘记了什么。
@LonelyPlanet 你不需要为你的渐变使用50% 51%。 50% 50% 是允许的。当你这样做时它会变得尖锐：jsfiddle.net/tgbmzfhL/2
我知道 Firefox 有一个错误，即 CSS 渐变中的那些急剧过渡是锯齿状的，并且没有正确抗锯齿。我相信这已经解决了。

标签： javascript html css svg

【解决方案1】：

您可以使用 SVG 中的两个 path 元素来实现这一点，然后根据需要给它们填充。

svg path#green {
  fill: green;
}
svg path#red {
  fill: red;
}
div.bg {
  position: relative;
  height: 100vh;
  width: 100%;
}
div.bg svg {
  position: absolute;
  height: 100%;
  width: 100%;
}

<div class='bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M0,0 L100,100 100,0z' id='green' />
    <path d='M0,0 L0,100 100,100z' id='red' />
  </svg>
</div>

原答案：（因疏忽漏读不流畅部分）

您只需使用to [side] [side] 语法的渐变即可完成此操作。但正如您所说，当尺寸很高时，它确实会沿对角线产生锯齿状边缘。

.bg {
  background: linear-gradient(to top right, red 50%, green 50%);
  height: 100vh;
  width: 100%;
}

&lt;div class="bg"&gt;&lt;/div&gt;

【讨论】：

虽然渐变在某些维度上呈锯齿状，但对于浅色，我看得很细。 @Harry，这是非常简单且很棒的答案。谢谢
不幸的是，这并不总是在不同宽度或不同浏览器上平滑/抗锯齿。特别是 Safari 和 Chrome 似乎有锯齿状的边框，具体取决于浏览器的角度和宽度。有时流畅，有时不流畅。

【解决方案2】：

生成您想要的 SVG 的简单方法可能是使用 Harry 的方法 - 使用两个三角形 - 或在矩形顶部添加一个三角形。

但是，也可以使用渐变来完成。这种方法的一个优点是在两种颜色的边缘重合时不会出现任何抗锯齿问题。

svg stop.color1 {
  stop-color: green;
}
svg stop.color2 {
  stop-color: red;
}
div.bg {
  width: 100vw;
  height: 60vw;
}
div.bg svg {
  width: 100%;
  height: 100%;
}

<div class='bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio="none">
    <defs>
      <linearGradient id="grad" x2="1" y2="1">
        <stop offset="0.5" class="color1"/>
        <stop offset="0.5" class="color2"/>
      </linearGradient>
    </defs>
    <rect width="100" height="100" fill="url(#grad)"/>
  </svg>
</div>

【讨论】：