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

    }

}