title: Issue with linear gradient on svg text
body: <p>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.  </p>
  
  <pre><code>&lt;div class="logo"&gt;
  &lt;svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"&gt;
  
  &lt;defs&gt;
      &lt;linearGradient id="MyGradient"&gt;
          &lt;stop offset="5%"  stop-color="green"/&gt;
          &lt;stop offset="95%" stop-color="gold"/&gt;
      &lt;/linearGradient&gt;
  &lt;/defs&gt;
  
    &lt;style&gt;
  
      .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"/&gt;
  }
  
      .sfp9 {
          font-family: CamphorW01-Thin, sans-serif;
          font-size: 25px;
          fill: rgb(117,163,126);
          kerning="40";
      }
  
    &lt;/style&gt;
  
    &lt;text x="0" y="25" class="sfp9" kerning="40"&gt;MainLogo&lt;/text&gt;
    &lt;text x="24" y="33" class="sfp2"&gt;Tag Line&lt;/text&gt;
  
  &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My questions are:  what am I doing wrong in the sfp2 class, and can we use linear-gradient instead when it's svg text?  </p>