我正在重新撰寫這個問題，我為第一次嘗試的混亂道歉。我制作了一個清晰的html和css示例來說明這個問題:
<!DOCTYPE html>
<html>
<div id="test">test</div>
<svg width="1" height="0.67" viewBox="0 0 1 0.67" fill="none" xmlns="http://www.w3.org/2000/svg">
<clipPath id="mypath" clipPathUnits="objectBoundingBox"> <path d="M0.765561 0.669377C0.759194 0.669006 0.752816 0.66799 0.746517 0.666302L0 0.466273V0.0948509C0 0.0424662 0.0424659 0 0.094851 0H0.905149C0.957534 0 1 0.0424662 1 0.0948509V0.479892L0.838139 0.641753C0.821451 0.658442 0.799442 0.668047 0.77656 0.669377H0.765561Z" fill="#D9D9D9"/>
</clipPath>
</svg>
</html>
<style>
#test{
display: block;
background-color:rgb(0, 167, 50);
width:369px;
height:247px;
clip-path: url("#mypath");
}
</style>我重新制作了與div大小相同的SVG:
#test{
display: block;
background-color:rgb(0, 167, 50);
width:369px;
height:247px;
clip-path: url("#mypath");
}<div id="test">test</div>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 369 246" style="enable-background:new 0 0 369 246;" xml:space="preserve">
<clipPath id="mypath">
<path d="M184.5,0c49.5,0,99,0,148.4,0C353.8,0,369,15.3,369,36.2c0,45,0,89.9,0.1,134.9c0,3.8-1.1,6.5-3.8,9.2
c-18,17.8-36.2,35.4-53.7,53.8c-12,12.6-25.4,15-41.7,10.4c-31.4-8.9-63-17.1-94.5-25.5c-39.2-10.5-78.4-21.1-117.6-31.6
C41,182.8,24,178.2,7,174c-4.8-1.2-7-2.9-7-8.6c0.3-43.1,0.2-86.3,0.2-129.4C0.2,15.4,15.6,0,36,0C85.5,0,135,0,184.5,0z"/>
</clipPath>
</svg>這是我在YouTube上看clipPath教程得到的解決方案:問題是svg中的路徑單位是絕對的，而不是相對的。我不得不使用https://yoksel.github.io/relative-clip-path/將路徑單位從userSpaceOnUse轉換到objectBoundingBox(正如在提到的網(wǎng)站上看到的)——換句話說，從絕對轉換到相對。我用從yoksel.github.io/relative-clip-path/得到的東西替換了路徑的整個d屬性，現(xiàn)在它工作得很好。