title: SVG circle not working in Chrome
body: <p>I’ve this svg code. It works fine in Firefox and Safari. But for some reason it doesn’t show up in Chrome. And I cant figure out why...</p>
  
  <pre><code>&lt;svg version="1.1" id="red_rgb" viewBox="0 0 100 56" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;circle class="red" cx="50" cy="18" r="18"/&gt;
      &lt;circle class="green" cx="39" cy="37" r="18"/&gt;
      &lt;circle class="blue" cx="61" cy="37" r="18"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and this CSS</p>
  
  <pre><code>.rgb_content    {
      width: 100%;
      height: 230%;
      position: absolute;
      left:0;
      top:12.5%; 
      z-index: 2;
      }       
  
  .rgb_svg {
      position: absolute;
      z-index: 10;
  }
  
  circle.red {
      fill: red;
  }
  
  circle.green {
      fill: green;
  }
  
  circle.blue {
      fill: blue;
  }   
  
  circle.red, circle.green, circle.blue {
      mix-blend-mode: lighten;
  }
  
  .rgb_text {
      position: absolute;
      mix-blend-mode: hue;                
      z-index: 20;                
  }
  </code></pre>
  
  <p>As said: It works fine in FireFox and Safari, but not in Chrome.
  What am I doing wrong?</p>