title: 'display: none' on SVG element with pattern definitions makes patterns invisible
body: <p>I have a set of SVG definitions which I place at the top of my body.  This svg tag has height and width of 0, but without display:none, it creates space at the top of the document.  To fix this I add display:none.  However, this causes the patterns defined in it to not work when referenced later on in the document.</p>
  
  <pre><code>&lt;body&gt;
  &lt;svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" &gt;
  &lt;defs&gt;
  &lt;g id="diamond"&gt;
    &lt;path d="M50,7 L96,100 L50,193 L4,100 L50,7 Z"&gt;&lt;/path&gt;
  &lt;/g&gt;
  &lt;g id="oval"&gt;
    &lt;path d="M3,150 L3,50 C3,24.084 24,3 50,3 C76,3 97,24 97,50 L97,150 C97,176 75.916,197 50,197 C24.084,197 3,176 3,150 Z"&gt;&lt;/path&gt;
  &lt;/g&gt;
  &lt;g id="squiggle"&gt;
    &lt;path d="M25,77 C25,48 4,45 4,25 C4,14 18,3 40,3 C66,3 92,21 92,54 C92,86 75,100 75,123 C75,152 96,155 96,175 C96,186 82,197 60,197 C34,197 8,179 8,146 C8,114 25,100.02465 25,77 Z"&gt;&lt;/path&gt;
  &lt;/g&gt;
  &lt;pattern id="triangle" width="10" height="10" patternUnits="userSpaceOnUse"&gt;
      &lt;polygon points="5,0 10,10 0,10"&gt;&lt;/polygon&gt;
  &lt;/pattern&gt;
  &lt;pattern id="green-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;"&gt;
    &lt;rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: green;"&gt;&lt;/rect&gt;
  &lt;/pattern&gt;
  &lt;pattern id="red-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;"&gt;
    &lt;rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: red;"&gt;&lt;/rect&gt;
  &lt;/pattern&gt;
  &lt;pattern id="purple-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;"&gt;
    &lt;rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: purple;"&gt;&lt;/rect&gt;
  &lt;/pattern&gt;
  &lt;/defs&gt;
  &lt;/svg&gt;
  &lt;div class="topbar"&gt;&lt;/div&gt;
  &lt;div id="game"&gt;
      &lt;div class="cardrow"&gt;
      &lt;div class="card purple-card" id="oqFqnSBH6zMRc5hJr" width="100" height="200"&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: purple; fill: none;"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: purple; fill: none;"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;/div&gt;
   &lt;div class="card red-card" id="xPibDdNYe2vAgDYKK" width="100" height="200"&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: red; fill: none;"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: red; fill: none;"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;/div&gt;    
      &lt;div class="card purple-card" id="MgATXd9RTv52MKFtp" width="100" height="200"&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: purple; fill: url(#purple-stripes);"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#diamond" style="stroke: purple; fill: url(#purple-stripes);"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;/div&gt;
      &lt;div class="card red-card" id="mzpSYNnFXFX9SjPLa" width="100" height="200"&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#oval" style="stroke: red; fill: none;"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#oval" style="stroke: red; fill: none;"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;svg width="100" height="200" z-index="-40" style="display:inline-block"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#oval" style="stroke: red; fill: none;"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;/body&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vahkogdk/" rel="noreferrer">http://jsfiddle.net/vahkogdk/</a></p>