Demo
<svg width="600" height="270">
<defs>
<linearGradient id="background"> <!--背景渐变色-->
<stop offset="0%" stop-color="#232526" />
<stop offset="100%" stop-color="#414345" />
</linearGradient>
<linearGradient id="text-color" x1="0" y1="0" x2="0" y2="100%"> <!--文字渐变色-->
<stop offset="0%" stop-color="#DCE35B" />
<stop offset="100%" stop-color="#45B649" />
</linearGradient>
</defs>
<rect x="0" y="0" height="100%" width="100%" fill="url(#background)"></rect>
<text y="28%" x="28%">试问闲情都几许？</text>
<text y="44%" x="28%">一川烟草</text>
<text y="60%" x="28%">满城风絮</text>
<text y="76%" x="28%">梅子黄时雨</text>
</svg>
<style>
text{
font-size: 32px;
letter-spacing:5px;
fill:url(#text-color); //文字的填充使用渐变色
}
</style>
渐变配色
