如何修复 SVG 上的渐变色答案

【问题标题】：How to fix gradient color on SVG如何修复 SVG 上的渐变色
【发布时间】：2021-07-24 05:09:36
【问题描述】：

我是初学者，我正在尝试在 SVG 上使用渐变色。但是颜色和之前的div不匹配。

我在.test上使用了渐变色，颜色是：

background: linear-gradient(
    60deg,
    rgba(84, 58, 183, 1) 0%,
    rgba(0, 172, 193, 1) 100%
  );

我在.test-2 div 上使用了SVG。我希望两个 div 之间似乎没有分区。

这是一张图片：

我的代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.test {
  background: linear-gradient(
    60deg,
    rgba(84, 58, 183, 1) 0%,
    rgba(0, 172, 193, 1) 100%
  );
  width: 100%;
  height: 65vh;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<div class="test">
  <h1>Demo Text</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat aspernatur nemo accusantium soluta quidem cum obcaecati amet, deserunt, quo cupiditate quam vel excepturi quas laboriosam consequuntur sapiente! Necessitatibus, nesciunt quae non, optio cumque assumenda commodi minima qui quo animi a! Laudantium inventore vero est sunt. Facere incidunt quisquam debitis ipsa maiores totam excepturi nesciunt perferendis repudiandae eum. Esse tenetur nemo asperiores nihil autem dolor atque molestias amet quaerat consequatur? Iste delectus culpa atque voluptates debitis voluptatem fuga, ab mollitia earum quibusdam ipsum numquam soluta, quia molestiae animi nisi obcaecati rem aliquid amet? Quam beatae sunt ad dolores numquam magni ratione!</p>
</div>

<div class="test-2">
  <svg id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 300" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0" gradientTransform="rotate(60)"><stop stop-color="rgba(84, 58, 183, 1)" offset="0%"></stop><stop stop-color="rgba(0, 172, 193, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,30L80,65C160,100,320,170,480,200C640,230,800,220,960,180C1120,140,1280,70,1440,80C1600,90,1760,180,1920,205C2080,230,2240,190,2400,165C2560,140,2720,130,2880,105C3040,80,3200,40,3360,55C3520,70,3680,140,3840,170C4000,200,4160,190,4320,180C4480,170,4640,160,4800,150C4960,140,5120,130,5280,115C5440,100,5600,80,5760,85C5920,90,6080,120,6240,140C6400,160,6560,170,6720,145C6880,120,7040,60,7200,70C7360,80,7520,160,7680,200C7840,240,8000,240,8160,215C8320,190,8480,140,8640,105C8800,70,8960,50,9120,65C9280,80,9440,130,9600,130C9760,130,9920,80,10080,70C10240,60,10400,90,10560,100C10720,110,10880,100,11040,115C11200,130,11360,170,11440,190L11520,210L11520,300L11440,300C11360,300,11200,300,11040,300C10880,300,10720,300,10560,300C10400,300,10240,300,10080,300C9920,300,9760,300,9600,300C9440,300,9280,300,9120,300C8960,300,8800,300,8640,300C8480,300,8320,300,8160,300C8000,300,7840,300,7680,300C7520,300,7360,300,7200,300C7040,300,6880,300,6720,300C6560,300,6400,300,6240,300C6080,300,5920,300,5760,300C5600,300,5440,300,5280,300C5120,300,4960,300,4800,300C4640,300,4480,300,4320,300C4160,300,4000,300,3840,300C3680,300,3520,300,3360,300C3200,300,3040,300,2880,300C2720,300,2560,300,2400,300C2240,300,2080,300,1920,300C1760,300,1600,300,1440,300C1280,300,1120,300,960,300C800,300,640,300,480,300C320,300,160,300,80,300L0,300Z"></path></svg>
</div>

我该怎么做？

[请全屏运行 sn-p]

【问题讨论】：

如果你将线性渐变背景放在你想要的高度的容器上（或者只是让 .test 更高）你可以使用 CSS 剪辑路径来创建波浪效果而不是尝试在底部添加一个 svg。

标签： html css svg gradient

【解决方案1】：

您必须合并这两个部分。您可以通过 Adobe Illustrator 或在线工具（例如 https://editor.method.ac/）执行此操作。并导出为 svg 文件。然后使用 svg 文件作为背景图片。

【讨论】：

【解决方案2】：

我觉得它非常适合你：

<div class="test">
  <h1>Demo Text</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat aspernatur nemo accusantium soluta quidem cum obcaecati amet, deserunt, quo cupiditate quam vel excepturi quas laboriosam consequuntur sapiente! Necessitatibus, nesciunt quae non, optio cumque assumenda commodi minima qui quo animi a! Laudantium inventore vero est sunt. Facere incidunt quisquam debitis ipsa maiores totam excepturi nesciunt perferendis repudiandae eum. Esse tenetur nemo asperiores nihil autem dolor atque molestias amet quaerat consequatur? Iste delectus culpa atque voluptates debitis voluptatem fuga, ab mollitia earum quibusdam ipsum numquam soluta, quia molestiae animi nisi obcaecati rem aliquid amet? Quam beatae sunt ad dolores numquam magni ratione!</p>
</div>
<div class="test-2">
  <svg id="wave" style="transform:rotate(180deg); transition: 0.3s" version="1.1" viewBox="0 0 1440 300" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0%" y1="0%" x2="100%" y2="0%"><stop stop-color="rgba(0, 172, 193, 1)" offset="0%"></stop><stop stop-color="rgba(84, 58, 183, 1)" offset="10%"></stop></linearGradient></defs><path style="opacity:1" fill="url(#sw-gradient-0)" d="M0,30L80,65C160,100,320,170,480,200C640,230,800,220,960,180C1120,140,1280,70,1440,80C1600,90,1760,180,1920,205C2080,230,2240,190,2400,165C2560,140,2720,130,2880,105C3040,80,3200,40,3360,55C3520,70,3680,140,3840,170C4000,200,4160,190,4320,180C4480,170,4640,160,4800,150C4960,140,5120,130,5280,115C5440,100,5600,80,5760,85C5920,90,6080,120,6240,140C6400,160,6560,170,6720,145C6880,120,7040,60,7200,70C7360,80,7520,160,7680,200C7840,240,8000,240,8160,215C8320,190,8480,140,8640,105C8800,70,8960,50,9120,65C9280,80,9440,130,9600,130C9760,130,9920,80,10080,70C10240,60,10400,90,10560,100C10720,110,10880,100,11040,115C11200,130,11360,170,11440,190L11520,210L11520,300L11440,300C11360,300,11200,300,11040,300C10880,300,10720,300,10560,300C10400,300,10240,300,10080,300C9920,300,9760,300,9600,300C9440,300,9280,300,9120,300C8960,300,8800,300,8640,300C8480,300,8320,300,8160,300C8000,300,7840,300,7680,300C7520,300,7360,300,7200,300C7040,300,6880,300,6720,300C6560,300,6400,300,6240,300C6080,300,5920,300,5760,300C5600,300,5440,300,5280,300C5120,300,4960,300,4800,300C4640,300,4480,300,4320,300C4160,300,4000,300,3840,300C3680,300,3520,300,3360,300C3200,300,3040,300,2880,300C2720,300,2560,300,2400,300C2240,300,2080,300,1920,300C1760,300,1600,300,1440,300C1280,300,1120,300,960,300C800,300,640,300,480,300C320,300,160,300,80,300L0,300Z"></path>    </svg>
</div>

和

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.test {
  background: linear-gradient(60deg,rgba(84, 58, 183, 1) 19%,rgba(0, 172, 193, 1) 88%);
  width: 100%;
  height: 65vh;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Link to fiddle

【讨论】：

不幸的是，这不是完全响应 - 在狭长的视口上尝试 - svg 使用线性渐变“重新开始”，因此不能与文本 div 的背景连续。
@AHaworth - 该死，你是对的。最终，我认为使用 SVG 来实现这种波浪效果是一种不好的方法。我宁愿创建一个 PNG 图像并将其添加到 div 下方，也不愿尝试使其工作。即使做一个 CSS 剪辑路径也比在下面拍一张你可以快速 Photoshop（或在 MS 绘画、GIMP 等中做）的图像更难管理。
使用图像的问题在于响应式 - 是的，它们可以缩放，但您需要一个高清图像来覆盖所有可能的设备尺寸。