title: Using clipPathUnits="objectBoundingBox" makes clip path disappear
body: <h2>Problem:</h2>
  <p>I've created an <strong>SVG Clip Path</strong> which needs to be responsive, but when I try to use  <code>clipPathUnits=&quot;objectBoundingBox&quot;</code> in the clip path tag, it makes the target object disappear.</p>
  <p>I made example snippets with and without. <strong>The first one shows as expected</strong>, but the second is completely hidden.</p>
  <p>I've tested it with various simple shapes and paths which work fine, but I can't get <code>clipPathUnits=&quot;objectBoundingBox&quot;</code> working with anything more complicated, not sure what I'm missing.</p>
  <h2>Snippet:</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #333;
  }
  
  #hero {
    background: url(https://source.unsplash.com/random);
    height: 120vh;
    background-color: #ff0000;
    width: 100vw;
    background-size: cover;
    clip-path: url(#wav);
  }
  
  #hero2 {
    background: url(https://source.unsplash.com/random);
    height: 120vh;
    background-color: #ff0000;
    width: 100vw;
    background-size: cover;
    clip-path: url(#wav2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hero"&gt;&lt;/div&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"&gt;
        &lt;clipPath id="wav" &gt;
          &lt;path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" /&gt;
        &lt;/clipPath&gt;       
    &lt;/svg&gt;
  
  
  &lt;div id="hero2"&gt;&lt;/div&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"&gt;
        &lt;clipPath id="wav2" clipPathUnits="objectBoundingBox"&gt;
          &lt;path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" /&gt;
        &lt;/clipPath&gt;       
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <h2>Resources:</h2>
  <p><a href="https://www.w3.org/TR/SVG11/masking.html#ClipPathElementClipPathUnitsAttribute" rel="nofollow noreferrer">https://www.w3.org/TR/SVG11/masking.html#ClipPathElementClipPathUnitsAttribute</a></p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits</a></p>
  <p><a href="https://www.sarasoueidan.com/blog/css-svg-clipping/" rel="nofollow noreferrer">https://www.sarasoueidan.com/blog/css-svg-clipping/</a></p>