SVG clipPath 未正确剪切

Question

我试图将一个带有 clipPath 的 div 放在我们页脚中另一个 div 的顶部。 这是我正在尝试完成的图像。 从理论上讲，这听起来很简单，但我似乎在剪辑路径 SVG 的放置和缩放方面苦苦挣扎。

我用于剪辑的 SVG 概述如下：

<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>

使用上面的 SVG 时，我得到以下结果：

删除clipPathUnits="objectBoundingBox" ，我得到以下结果：

没有 clipPathUnits 的最后一个结果是最令人困惑的，因为这就是我的 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 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;
    }

}

我是否遗漏了 SVG 标记中的某些内容，或者是否遗漏了一些关于 clipPaths 的位置的信息？ 任何帮助将不胜感激。

Answer 1

非常感谢@enxaneta 的解决方案。

我遵循了这里的指南： yoksel.github.io/relative-clip-path

并提出了这个解决方案：

<?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;
        }

    }

}