使用自定义 SVG 形状遮盖/裁剪图像

Question

我需要使用自定义形状 SVG 来遮盖图像（它就像一个拱门，如下图所示）。下面是带有 SVG 形状路径的实际代码：

    img {
      clip-path: path('M451.715 154.05C451.79 152.468 451.828 150.88 451.828 149.286C451.828 66.8376 350.683 0 225.914 0C101.145 0 0 66.8376 0 149.286C0 150.88 0.0378114 152.468 0.112874 154.05H0V536H451.828V154.05H451.715Z');
    }

这是原始的 SVG：

<svg width="452" height="536" viewBox="0 0 452 536" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M451.715 154.05C451.79 152.468 451.828 150.88 451.828 149.286C451.828 66.8376 350.683 0 225.914 0C101.145 0 0 66.8376 0 149.286C0 150.88 0.0378114 152.468 0.112874 154.05H0V536H451.828V154.05H451.715Z" fill="#FF0809"/>
</svg>

这似乎可行，但我需要将形状置于图像的中心，并且必须保持其比例（不拉伸）。下面我附上一张图片，其中的细节比文字更能解释。

任何想法？

Answer 1

根据我的经验，我使用了内联 svg 元素。之前尝试过很多事情clip-path，但无法使其正常工作。

这就是我最终得到的结果：

超文本标记语言

<div class="svg-image">
    <svg viewBox="0 0 750 750" preserveAspectRatio="xMidYMid meet">
    ...
    </svg>
    <img src="..." alt="" />
</div>

CSS

svg {
    overflow: hidden;
}

.svg-image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.svg-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

演示版

我在 Illustrator 中对你的 svg 文件进行了一些调整，并创建了原始路径的“复合路径”。我还添加了背景路径 ( M489,535H-36V0h525V535z) 并合并了两个路径。

<svg viewBox="0 0 452 536" preserveAspectRatio="xMidYMid meet">
    <g>
        <path fill="#FFFFFF" d="M489,535H-36V0h525V535z M451.7,154.1c0.1-1.6,0.1-3.2,0.1-4.8C451.8,66.8,350.7,0,225.9,0S0,66.8,0,149.3c0,1.6,0,3.2,0.1,4.8H0v382h451.8v-382H451.7z" />
    </g>
</svg> 

现在可以将其用作内联 svg 蒙版。让我们看看是否可以让它与 CSS 一起工作......

编辑：不幸的是，我没有看到一个简单的选择来使其clip-path响应。如果它是一个基本形状，那么我们可以使用 % 或 em，但由于情况并非如此，我相信内联 svg 是您唯一的选择。除非其他人有更好的主意？ https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path