SVG clipPath not clipping properly properly - html

Question

I am attempting to place a div with a clipPath on top of another div in our footer. Here is an image of what I'm trying to accomplish. In theory, this sounds simple, but I seem to be struggling with the placement and scaling of the clip-path SVG.
The SVG that I am using for the clip is outlined as follows:
<svg height="0" width="0">
<defs>
<clipPath id="clipName" clipPathUnits="objectBoundingBox">
<path class="st0" d="M0,0v258.5l2.9,0.3l636.9,65.3c28.5,2.9,57.2,2.9,85.7,0l637.6-65.3l2.9-0.3l0,73.5h0V0H0z"/>
</clipPath>
</defs>
</svg>
When using the SVG above, I get the following result:
When removing the clipPathUnits="objectBoundingBox", I get the following result:
The last result without the clipPathUnits is what is most confusing, as this is what my SVG looks like (visually):
Here is the current code...
<div class="map-container">
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<div class="map-clip">
<?php echo file_get_contents(get_template_directory_uri() . '/img/map-template.svg'); ?>
</div>
</div>
.map-container {
position: absolute;
left: 0;
right: 0;
top: -15rem;
z-index: 3;
width: 100%;
clip-path: url(#clipName);
.acf-map {
width: 100%;
height: 20rem;
img {
max-width: inherit !important;
}
}
.map-clip {
display: none;
}
}
Am I missing something in my SVG markup, or have I missed some information in terms of placement of clipPaths? Any help would be greatly appreciated.

Answer 1

Huge thank you to #enxaneta for the solution.
I followed the guide here: yoksel.github.io/relative-clip-path
And came up with this for the solution:
<?php echo file_get_contents(get_template_directory_uri() . '/img/map-template.svg'); ?>
<div class="map-container">
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
</div>
svg {
position: absolute;
width: 0;
height: 0;
}
.map-container {
position: absolute;
left: 0;
right: 0;
top: -15rem;
z-index: 3;
clip-path: url(#clipName);
.acf-map {
width: 100%;
height: 20rem;
img {
max-width: inherit !important;
}
}
}