SVG clipPath 没有正确裁剪答案

【问题标题】：SVG clipPath not clipping properly properlySVG clipPath 没有正确裁剪
【发布时间】：2019-12-09 02:53:57
【问题描述】：

我正在尝试在页脚中的另一个 div 顶部放置一个带有 clipPath 的 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 位置的一些信息？任何帮助将不胜感激。

【问题讨论】：

objectBoundingBox 单位介于 0 和 1 之间，因此 v258.5 对于此类单位似乎不正确。
@RobertLongson 啊，这很有道理。我用 Illustrator 生成了这个 SVG。关于从它快速转换为 objectBoundingBox 单位的任何想法？
您可以试试这个工具：yoksel.github.io/relative-clip-path 在您的情况下，您可以将此值用于 d 属性：M0,0 v0.779 l0.002,0.001 l0.466,0.197 c0.021,0.009,0.042,0.009,0.063,0 l0.467,-0.197 l0.002,-0.001 l0,0.221 h0 V0 H0
@enxaneta 你的建议解决了这个问题。非常感谢您的推荐！

标签： html css svg

【解决方案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;
        }

    }

}

【讨论】：