Why doesn't CSS clip-path with SVG work in Safari? : <p>I have an inline svg and a background image on the masthead. 
I am using css clip-path to 'clip' out the svg animation with the image below. </p>

<p>I have it working great in firefox and chrome but safari doesn't apply any of the clipping/masking at all. </p>

<p>I checked caniuse spec's before starting this project and it states the same rules and exceptions that apply to chrome, I just tested with chrome first and it worked so I continued on it figuring safari would have the same treatment. </p>

<p>I have been scratching my head trying to figure out how to get the clipping to work properly in safari with no avail. </p>

<p>How can I get this to work in safari? 
Pen for reference: 
<a href="https://codepen.io/H0BB5/pen/Xpawgp" rel="noreferrer">https://codepen.io/H0BB5/pen/Xpawgp</a></p>

<p>HTML</p>

<pre><code>&lt;clipPath id="cross"&gt;
    &lt;rect y="110" x="137" width="90" height="90"/&gt;
    &lt;rect x="0" y="110" width="90" height="90"/&gt;
    &lt;rect x="137" y="0" width="90" height="90"/&gt;
    &lt;rect x="0" y="0" width="90" height="90"/&gt;
 &lt;/clipPath&gt;
</code></pre>

<p>CSS</p>

<pre><code>#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}
</code></pre>
