I'm experimenting with adding a linear gradient to SVG text, but I'm struggling to specify the fill color in the text class. I came across an example online and decided to try it out, but when I entered the fill color for the text (in the sfp2 class defined below) as fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/>, the text disappeared from the screen completely.
<div class="logo">
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="green"/>
<stop offset="95%" stop-color="gold"/>
</linearGradient>
</defs>
<style>
.sfp2 {
font-family: CamphorW01-Regular, sans-serif;
font-size: 7px;
/*fill: rgb(71,164,71);*/
fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/>
}
.sfp9 {
font-family: CamphorW01-Thin, sans-serif;
font-size: 25px;
fill: rgb(117,163,126);
kerning="40";
}
</style>
<text x="0" y="25" class="sfp9" kerning="40">MainLogo</text>
<text x="24" y="33" class="sfp2">Tag Line</text>
</svg>
</div>
My main concerns are: what's wrong with the sfp2 class and can we utilize linear-gradient instead of URL when dealing with SVG text?