title: SVG fill of type linearGradient is not displayed
body: <p>I hope somebody out there might experienced this strange behaviour of a svg linear gradient fill, which is not displayed resp. applied at all in standard browsers. Other properties as the stroke work as expected, but not the fill! The element seems to be transparent.</p>
  
  <p>I actually figured out that there might be side effects with a jquery Data Table which is placed on the same page as the SVG element.</p>
  
  <pre><code>&lt;svg viewBox="0 12.705 512 486.59" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="20" width="20" style="margin-right: 0px;"&gt;
      &lt;defs&gt;
          &lt;linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="jRate_grad1"&gt;        
              &lt;stop stop-color="white" offset="0%"/&gt;
              &lt;stop stop-color="yellow" offset="100%"/&gt;
          &lt;/linearGradient&gt;
     &lt;/defs&gt;
     &lt;polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 " style="fill: url(#jRate_grad1);stroke:black;fill-opacity:1;stroke-width:2px;"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The svg code is generated by the jquery rating plugin <a href="https://github.com/senthilporunan/jRate" rel="nofollow">jRate</a>.</p>
  
  <p>A test site setup which reproduces the "error" can be found <a href="http://kisters-dev.crealistiques.de/datatable/" rel="nofollow">here</a>. The SVG elements are those little cross symbols in the table column "Bewertung". </p>