时间戳

首页 > 解决方案 > 如何修复 SVG 上的渐变色

html - 如何修复 SVG 上的渐变色

问题描述

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

我使用了渐变色，.test颜色为：

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

我在.test-2div 上使用了 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>

我怎样才能做到这一点？

[请全屏运行代码段]

标签： htmlcsssvggradient

解决方案

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

推荐阅读