用渐变填充SVG形状

Question

如何在此图案上应用线性渐变和投影阴影效果？

<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>

- Shahid

---

像上面图片中的渐变和运行上述代码时的图案一样。 - Shahid

运行代码后，您可以看到的模式。 - Shahid

模式现在已经在上面。 - Shahid

回到我的第一个问题，如果把它们放在一起，它们会是什么样子？ - Robert Longson

它看起来像这样，但我需要与上面部分显示的相同渐变。 - Shahid

Answer 1

根据Paul LeBeau的评论，您需要将波浪形状转换为一个路径，然后可以像这个示例中所示那样使用线性渐变填充波浪形状：

<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>

- web-tiki

---

有人知道为什么在示例中总是使用5％和95％而不是0％和100％吗？只是好奇... - noitseuq

@noitseuq 没有真正的原因，它对输出没有太大影响。 - web-tiki

Answer 2

尝试以下操作：

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

- Arif Burhan

---

我刚试过了，对我有效！成功！！ - Arif Burhan

如何在上方添加阴影？ - Shahid

Answer 3

这不完全是你要找的，但试试这个。逐个编辑数字参数以查看效果。

<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>

- Arif Burhan