用渐变填充 SVG 形状答案

【问题标题】：Fill an SVG shape with a gradient用渐变填充 SVG 形状
【发布时间】：2016-09-16 15:12:28
【问题描述】：

如何将线性渐变和阴影应用到此图案？

<svg viewbox="0 0 60 10">
  <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10">
    <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" />
  </pattern>
  <rect x="0" y="0" width="60" height="7" fill="url(#waves)" />
</svg>

【问题讨论】：

如果你有渐变和图案会是什么样子？
渐变如上图，图案与运行上述代码相同
这只是一个渐变。模式在哪里。
运行代码可以看到的模式
图案在上面

标签： css svg linear-gradients

【解决方案1】：

不完全是您正在寻找的东西，但请尝试：

<svg viewbox="0 0 100 80">

   <defs>


     <filter id="f1" x="0" y="0" width="140%" height="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="8" dy="6" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>

      <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="50" height="20">
        <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="url(#grad1)"   />
      </pattern>

   </defs>

      <rect x="0" y="3" width="200" height="20"  fill="url(#waves)"  filter="url(#f1)" />

</svg>

单独编辑数值参数以查看效果。

【讨论】：

【解决方案2】：

正如Paul LeBeau 所评论的，您需要将波浪形转换为一条路径，然后您可以使用linear gradient 填充波浪形，如下例所示：

<svg viewbox="7.5 0 60 10">
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="#FFC338" />
      <stop offset="95%" stop-color="#FFEA68" />
    </linearGradient>
  </defs>
  <path fill="url(#gradient)" d="M0 10 V5 Q2.5 2.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V10" />
</svg>

【讨论】：

有谁知道为什么他们总是在示例中使用 5% 和 95% 而不是 0% 和 100%？只是好奇...
@noitseuq 没有真正的理由它对输出没有太大影响。

【解决方案3】：

尝试以下方法：

将所有渐变和图案定义放在<defs> 块中。关闭 defs 块后，放置可见的内容标签。

【讨论】：

我刚刚尝试过，它对我有用！成功！！
如何在上方添加阴影？