用渐变填充 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试以下操作：

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

原文由 Arif Burhan 发布，翻译遵循 CC BY-SA 3.0 许可协议