title: Why doesn't CSS clip-path with SVG work in Safari?
body: <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>