Alright, let's get to it -
I've got a couple of SVGs here. The first one is a blue circle and the second one is a map of the United States. (Both of these were created in Illustrator)
Here's what I want to do: I want the map to serve as a mask for the blue circle.
The ultimate goal is to animate the blue circle so that it fills in the map.
However, before I can achieve that, I need to figure out how to make these masks work. Unfortunately, my attempts at using a clipping path didn't quite pan out. It only seemed to work in Firefox but not with any file created in Illustrator.
I have managed to come up with a version that somewhat works though. However, this approach only seems to be effective in Chrome.
To implement this, I utilized the
.class {clip-path: url(#clipping);}You can check out an example of what I've done here: http://codepen.io/CiderZombie/pen/EPzyeN
In the provided example, the circle serves as the mask. But when I switch the map and the circle, everything breaks down.