title: svg display none or visibility hidden still showing?
body: <p>I have 3 SVGs one on top of the other:</p>
  
  <pre><code>&lt;svg&gt;1&lt;/svg&gt;
  &lt;svg&gt;2&lt;/svg&gt;
  &lt;svg&gt;3&lt;/svg&gt;
  </code></pre>
  
  <p>To each <code>path</code> and <code>polygon</code> I have added <code>.country</code> and <code>.shape</code> then tried <code>display: none</code> or <code>opacity: 0</code> or <code>visbility: hidden</code></p>
  
  <pre><code>.oldmap .country,
  .oldmap .shape,
  .computer_all .country,
  .computer_all .shape {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
  
  .newmap .country,
  .newmap .shape { 
    opacity: 1;
    visibility: visible;
    display: block;
  }
  </code></pre>
  
  <p>No matter if I use <code>opacity</code> or <code>visibility</code> or <code>display none</code> but I still see the shape on top of the other or underneath.</p>
  
  <p>Only if i remove the other svg work, like: </p>
  
  <pre><code>$("svg1").remove();
  </code></pre>
  
  <p>I even tried to set</p>
  
  <pre><code>position:absolute; 
  left: -99999px;
  </code></pre>
  
  <p>If I hide ALL it's ok but if I am showing 1 then I will still see the rest too</p>