title: SVG "fill: url(#....)" behaving strangely in Firefox
body: <p>I have the following SVG graphic:</p>
  
  <pre><code>&lt;svg width='36' height='30'&gt;
    &lt;defs&gt;
      &lt;linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
        &lt;stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/&gt;
        &lt;stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/&gt;
      &lt;/linearGradient&gt;
      &lt;linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
        &lt;stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/&gt;
        &lt;stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/&gt;
      &lt;/linearGradient&gt;
      &lt;linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
        &lt;stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/&gt;
        &lt;stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
  
    &lt;text x="8" y="25" style="font-size: 29px;" font-family="Arial"&gt;hello world&lt;/text&gt;
  &lt;/svg&gt;'
  </code></pre>
  
  <p>I set the <code>fill</code> attribute of the <code>text</code> element through CSS and switch between the various gradients depending on the hover state.  This works great in Chrome &amp; Safari, but in Firefox, the text doesn't show up.  Upon inspecting the element, I discovered that Firefox is appending <code>none</code> to the end of my <code>fill: url(#...)</code> CSS attribute.  I tried deleting the <code>none</code> keyword with Firebug, but Firebug just deletes the entire attribute.  Why is this happening?</p>
  
  <p><strong>EDIT:</strong>
  I should note that if I remove the CSS that sets the <code>fill</code> property, and hardcode the <code>fill</code> attribute into the <code>text</code> element (not through an inline <code>style</code> attribute), the text displays properly in all browsers.</p>