如何将线性渐变和阴影应用于此图案?
<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 评论的那样,你需要将波浪形状转换为一条路径,然后你可以用 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>
关于css - 用渐变填充 SVG 形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37328302/