4

I am trying to put a linear gradient on svg text, but I'm not sure how to specify the fill color in the text class. While learning how to do this, I found an example on the web so I'm using that, but where I specify fill color for the text (in the sfp2 class defined below), I put fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/> but the text no longer shows up on screen at all.

<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 questions are: what am I doing wrong in the sfp2 class, and can we use linear-gradient instead when it's svg text?

Lazar Nikolic
  • 4,261
  • 1
  • 22
  • 46
RTC222
  • 2,025
  • 1
  • 20
  • 53

1 Answers1

4

Please try this:

<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);
}

    .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 id="test"  x="24" y="33" class="sfp2">Tag Line</text>

</svg>
</div>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • Yes, here is what makes it work: Tag Line. Thanks very much. – RTC222 Sep 16 '18 at 18:22
  • 2
    The preamble to this answer is totally irrelevant. This answer works because it now has a valid `fill` rule in the CSS. The one in the OPs original example is invalid because it has extra content (the ` x="10" y="10" width="100" height="100"` part). Also, The `` element does not have `x` and `y` attributes. – Paul LeBeau Sep 18 '18 at 11:20
  • 1
    @PaulLeBeau I agree. I've edited my answer to remove the error. – enxaneta Sep 18 '18 at 11:54