title: SVG Mask not working with illustrator generated SVGs (all browsers)
body: <p>So right to it - </p>
  
  <p>I have two SVGs, the first is a blue circle and the second is a map of the US. (both created in Illustrator)</p>
  
  <p>I want the map the be the mask of the blue ball. </p>
  
  <p>The end goal is to animate the blue ball to fill in the map. </p>
  
  <p>But first I need to make these masks work, which I cannot, I've tried a clipping path as well however that solution only worked in FF and not with any file created in Illustrator. </p>
  
  <p>This is as close as I have gotten to getting a mask to work, this only works in Chrome.</p>
  
  <p>I am using
      <code>.class {clip-path: url(#clipping);}</code> method.</p>
  
  <p><a href="http://codepen.io/CiderZombie/pen/EPzyeN" rel="nofollow">http://codepen.io/CiderZombie/pen/EPzyeN</a></p>
  
  <p>In that example the circle is the mask, when I switch the map and the circle it breaks. </p>