使用自定义 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

这促进了我自己的图书馆，pathfit。它正是针对这个问题。如果您只需要一次性解决方案，则可以在node 环境中计算新路径并完成。如果您期望各种响应大小，最好将库包含在您的页面上并让它动态计算。

const Pathfit = require('pathfit');

const 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';

const base = {
    viewBox: '0 0 452 536'
};

const pathfitter = new Pathfit(base, undefined, path);

// set width and height to the size of the image to be clipped
pathfitter.scale_with_aspect_ratio(width, height);

Answer 2

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

这就是我最终的结果：

HTML

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

DEMO

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