Inline SVG path not working - css

Question

I've been trying to get a inline svg clipping path to work but can't quite figure out why it isn't.
The first div in the snippet is the one that isn't working (#myClip)
The second is what it should look like.
The third div is all the same code but with a different path that does work.
So what's wrong with my first one? Any help is greatly appreciated.
#myDiv {
background: Red;
min-height: 400px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
/* Div with a different clipping path that I don't want */
#myDiv-two {
background: Red;
min-height: 400px;
-webkit-clip-path: url(#myClipTwo);
clip-path: url(#myClipTwo);
}
<h2>Div with clip path that's not working</h2>
<div id="myDiv">
<svg width="0" height="0">
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z"/>
</clipPath>
</svg>
</div>
<h2>Original SVG</h2>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690.45"><defs></defs><path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z" fill="#F34862"/></svg>
<h2>Div with different clipping path</h2>
<div id="myDiv-two">
<svg width="0" height="0">
<clipPath id="myClipTwo" clipPathUnits="objectBoundingBox">
<path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>
</clipPath>
</svg>
</div>

Answer 1

You have defined your clipping path to be clipPathUnits="objectBoundingBox". When you do that, the coordinates need to be between 0 and 1. (0,0) represents the top left of the element the clip is being applied to. And (1,1) represents the bottom right.
However your coordinates are much bigger than that. For example your initial line (M0,0V678.48) is from (0,0) to (0,678.48).

Answer 2

I would love an explanation as to why the coordinates need to be between 0 and 1 but I have made an SVG by hand instead of exporting from illustrator that is fairly close to my original using coordinates between 0 and 1 so it will work.
#myDiv {
background: Red;
min-height: 400px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
<h2>New Clip path</h2>
<div id="myDiv">
<svg width="0" height="0">
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="M0,0 1,0 1,0.86 C 1.1,.85, 0.9,1, 0.7,1 0.4,1, 0.3,0.8,0,1z"/>
</clipPath>
</svg>
</div>
<h2>Original SVG</h2>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690.45"><defs></defs><path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z" fill="#F34862"/></svg>