Why doesn't CSS clip-path with SVG work in Safari?

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.

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

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.

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

How can I get this to work in safari? Pen for reference: https://codepen.io/H0BB5/pen/Xpawgp

HTML

<clipPath id="cross">
    <rect y="110" x="137" width="90" height="90"/>
    <rect x="0" y="110" width="90" height="90"/>
    <rect x="137" y="0" width="90" height="90"/>
    <rect x="0" y="0" width="90" height="90"/>
 </clipPath>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}