用渐变填充 SVG 形状
Fill an SVG shape with a gradient
如何将线性渐变和阴影应用于此图案?
<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>
尝试以下操作:
将所有渐变和图案定义放在 <defs>
块中。
在 defs 块关闭后放置您可见的内容标签。
如本例所示 , you need to convert the wavy shape to one path, then you can fill the wavy shape with a 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>
不完全是您要查找的内容,但请尝试:
<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>
单独编辑数值参数以查看效果。
如何将线性渐变和阴影应用于此图案?
<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>
尝试以下操作:
将所有渐变和图案定义放在 <defs>
块中。
在 defs 块关闭后放置您可见的内容标签。
如本例所示
<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>
不完全是您要查找的内容,但请尝试:
<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>
单独编辑数值参数以查看效果。