title: FitBit: Masking only the size Text
body: <p>Please bear with me if my terminology is not correct. Very new to this.</p>
  
  <p>I'm creating a mask of a text element</p>
  
  <pre><code>&lt;svg&gt;
   &lt;mask id="TextMask"&gt;
      &lt;text id="TextMask" 
            class="Text-Mask" 
            x="10" y="193"&gt;Some Text to Mask&lt;/text&gt;
    &lt;/mask&gt;
  </code></pre>
  
  <p>The Class <code>Text-Mask</code> just contains font/anchor/font size.</p>
  
  <p>I then want to apply a gradient coloring to this text and <em>only</em> this text.  I have created a <code>gradientRect</code> element to apply to the text.  </p>
  
  <pre><code>  &lt;svg mask="#TextMask" width="100%" height="100%"&gt;
      &lt;gradientRect width="100%" height="100%"
        gradient-type="linear"
        gradient-x1="0" gradient-y1="50"
        gradient-x2="0" gradient-y2="100%-50"
        gradient-color1="red"
        gradient-color2="yellow" /&gt;
    &lt;/svg&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Now this works fine, but it isn't the effect I was hoping for. </p>
  
  <p>From my understanding when I created this <code>gradientRect</code> element, I'm creating it over the background of the entire screen.  </p>
  
  <p>What I <em>want</em> is for the entire <code>gradientRect</code> to <em>only</em> cover the area that the text takes up. (Ex. The very top of the text is red and then it becomes gradient to the bottom of the text to yellow).  As of right now how I currently have it, the text is in an orange/yellow area of the <code>gradientRect</code>.</p>
  
  <p>I'm not sure how I can accomplish this with the <code>gradient-y1</code> <code>y2</code>.  </p>
  
  <p>Am I able to get the size (and position) of the text (regardless if the font size changes or place the text somewhere else on the screen) and apply this easily, or will I have to brute force it and hard code it to fit around only the text area?  </p>