我如何應用線性漸變和陰影到這個圖案？

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

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

嘗試以下方法:

將所有漸變和圖案定義放在一個& ltdefs & gt阻止。 defs塊關閉后，放置可見的內容標簽。

這不完全是你正在尋找的，但是試試這個。單獨編輯數值參數以查看效果。

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