我需要使用自定義形狀的 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>
這似乎可行，但我需要將形狀放在影像的中心，并且必須保持其比例（而不是拉伸）。下面我附上一張比文字更能解釋細節的圖片。
任何的想法？
uj5u.com熱心網友回復：
這促進了我自己的庫pathfit。它正是針對這個問題。如果您只需要一次性解決方案，那么在node環境中計算新路徑并完成可能是合適的。如果您期望各種回應大小，最好將 lib 包含在您的頁面上并讓它動態計算。
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);
uj5u.com熱心網友回復：
根據我的經驗，我使用了行內 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;
}
演示
我在 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390300.html