Angular SVG Image Mask Not Spanning Viewport Width

I need to mask a header image. I am using a SVG at the moment, but I am having difficulty having the SVG fill the viewport width.

Here is the code example:

<div class="aspect-w-16 aspect-h-6 relative overflow-hidden">
<!-- Define the clipping path in an SVG -->
<svg class="hidden">
<defs>
<clipPath id="clipPath">
<path d="M0 0H1512V661C1512 661 1154 558.5 753 558.5C352 558.5 0 661 0 661V0Z" />
</clipPath>
</defs>
</svg>

<!-- Lazy Picture with clipping applied -->
<app-lazy-picture
[preload]="true"
[lazy]="false"
[additionalClasses]="[
'md:border md:border-white',
]"
[configurations]="
featuredImageConfiguration | async
"
class="h-full w-full"
style="clip-path: url(#clipPath); -webkit-clip-path: url(#clipPath);"
>
</app-lazy-picture>

<!-- Optional SVG for overlay or reference -->
<div class="absolute left-0 top-0 flex h-full w-full items-end justify-end text-white">
<svg
height="661"
viewBox="0 0 1512 661"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="100%"
preserveAspectRatio="none"
class="hidden w-full fill-current md:block"
>
<path d="M0 0H1512V661C1512 661 1154 558.5 753 558.5C352 558.5 0 661 0 661V0Z" />
</svg>
</div>
</div>


By removing the first SVG declaration and using the <!-- Optional SVG for overlay or reference --> the SVG lines up nicely and fills the width of the screen, but I can not get it to clip the image

Continue reading...