SVG 改變 clipPath 背景顏色

Question

我想創建一個登陸頁面，其中包含一個彩色的 div 和一個剪輯路徑，以便顯示在后台運行的視頻。 現在，由於我不明白的原因，背景看起來是灰色的。

我嘗試了多種方法，但無法正常工作。

這是我的代碼：

 .video_home_container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }.video_home_background { background: green; position: absolute; top: 0; left: 0; z-index: 11; width: 100vw; height: 100vh; clip-path: url(#mask); }.video { position: relative; z-index: 5; }.video_home_overlay_logo { position: absolute; top: 0; left: 0; z-index: 7; max-width: 100%; height: 100%; }.video_home_overlay_logo path { transform: scale(.8) translateY(40%); }

 <div class="video_home_container"> <div class="video_home_background"> <video class="video" autoplay loop width="100%"> <source src="<?php echo get_template_directory_uri(); ?>/static/home.mp4" type="video/mp4"> </video> </div> <svg class="video_home_overlay_logo" width="100%" height="100%" > <clipPath id="mask"> <path d="M587.505 411.454H487.962V312.839H587.505V213.814H487.962V115.145H587.505V11.1746H352.65V498.674L587.505 480.804V411.454Z" fill="black"/> <path d="M767.851 437.958H816.106L818.101 463.206L949.97 453.124L884.39 11.1746H688.473L626.664 477.88L765.282 467.305L767.851 437.958ZM791.924 126.976C798.809 213.814 805.695 286.68 812.581 345.574H765.856C769.545 299.641 778.043 226.684 791.924 126.976Z" fill="black"/> <path d="M1650.44 343.198V304.479H1515.13V388.065C1515.13 396.481 1514.91 403.422 1514.69 409.925L1648.58 399.706C1649.92 383.12 1650.44 364.648 1650.44 343.198Z" fill="black"/> <path d="M1465.8 393.175V151.351C1465.8 124.792 1467.42 107.796 1470.5 99.7077C1473.59 91.6196 1480.48 88.122 1491.63 88.122C1501.43 88.122 1507.83 91.3464 1510.92 97.7404C1514 104.134 1515.12 120.748 1515.12 146.679V255.568H1650.44V188.048C1650.44 139.465 1646.39 103.724 1638.3 80.8264C1630.11 58.1469 1613.11 38.6917 1587.21 22.8434C1561.11 7.92411 1528.24 0 1488.56 0C1459.16 0 1433.1 4.94583 1410.66 14.7554C1387.9 25.0295 1370.08 38.6918 1357.54 55.961C1345.28 71.7054 1337.34 90.3858 1334.54 110.146C1331.8 128.863 1330.55 157.117 1330.55 194.524V346.723C1330.23 372.486 1331.77 398.238 1335.16 423.778L1466.32 413.75C1466.08 407.629 1465.8 401.044 1465.8 393.175Z" fill="black"/> <path d="M1824.8 11.1746H1689.57V318.987C1689.57 351.175 1689.87 376.888 1690.69 396.589L1824.8 386.369V11.1746Z" fill="black"/> <path d="M1999.23 11.1746H1863.98V383.337L1999.23 373.035V11.1746Z" fill="black"/> <path d="M2334.43 115.145V11.1746H2038.34V115.145H2118.51V363.69L2253.82 353.607V115.145H2334.43Z" fill="black"/> <path d="M1117.09 296.635H1124.63C1143.27 296.635 1154.69 299.805 1159.06 306.855C1163.27 312.948 1165.59 328.25 1165.89 352.514C1165.89 354.208 1165.89 425.17 1165.89 436.674L1291.58 427.083V394.294C1291.58 352.268 1290.46 326.528 1288.25 317.293C1284.93 305.884 1279.04 295.387 1271.04 286.607C1261.58 275.349 1243.56 266.441 1216.96 259.884C1246.42 256.96 1266.34 248.626 1276.31 234.69C1286.28 220.755 1291.45 193.539 1291.45 153.044C1291.45 108.669 1284.26 76.2892 1270.24 56.0416C1256.23 35.794 1237.45 22.8422 1214.77 17.9784C1192.1 13.1146 1149 11.1746 1085.04 11.1746H989.237V450.145L1117.09 440.39V296.635ZM1117.09 99.8977H1124.63C1140.18 99.8977 1151.27 102.33 1156.96 107.822C1162.8 112.686 1165.73 122.741 1165.89 138.671V172.964C1165.54 193.512 1162.48 205.426 1156.96 209.224C1150.53 213.732 1140.01 215.7 1124.63 215.7H1117.09V99.8977Z" fill="black"/> <path d="M288.084 503.674C297.204 494.512 303.729 483.093 306.993 470.584C311.173 454.791 313.551 423.613 313.551 376.724V194.523C313.551 145.12 311.938 111.921 308.714 95.3892C305.688 78.3871 298.062 62.5389 286.663 49.5657C274.613 35.9034 256.879 26.0119 233.926 19.5086C210.755 13.7431 166.735 11.0652 101.375 11.0652H0V525.643L288.084 503.674ZM128.781 99.7885H135.312C150.395 99.7885 160.396 101.401 165.369 104.625C168.052 106.178 170.376 108.281 172.189 110.796C174.002 113.311 175.263 116.18 175.889 119.216C177.477 130.072 178.199 141.036 178.048 152.006V378.691C177.556 406.508 175.315 423.75 171.435 430.608C166.926 438.286 155.259 442.358 135.312 442.358H128.781V99.7885Z" fill="black"/> </clipPath> </svg> </div>

你會建議我做什么？ 我從 svg 剪輯路徑開始，所以我沒有得到所有的東西。

Answer 1

我懷疑您看到的只是視頻的一小部分。

這就是我的做法：對於剪輯路徑，我使用的是clipPathUnits="objectBoundingBox"

對象邊界框
此值表示元素內的所有坐標都相對於應用剪切路徑的元素的邊界框。 這意味着坐標系的原點是 object 邊界框的左上角，object 邊界框的寬度和高度被認為具有 1 個單位值的長度。

為了使它的長度為 1 個單位值，我正在縮放它transform="scale(0.0004)"

為了獲得此值 (0.0004)，您首先需要獲取剪切路徑內元素的邊界框，然后將 1 除以寬度： 1 / clip.getBBox().width

 .video_home_background { background: green; width: 100vw; clip-path: url(#clip); }

 <svg class="video_home_overlay_logo" width="0" height="0" > <clipPath id="clip" clipPathUnits="objectBoundingBox" transform="scale(0.0004)"> <path d="M587.505 411.454H487.962V312.839H587.505V213.814H487.962V115.145H587.505V11.1746H352.65V498.674L587.505 480.804V411.454Z" fill="black"/> <path d="M767.851 437.958H816.106L818.101 463.206L949.97 453.124L884.39 11.1746H688.473L626.664 477.88L765.282 467.305L767.851 437.958ZM791.924 126.976C798.809 213.814 805.695 286.68 812.581 345.574H765.856C769.545 299.641 778.043 226.684 791.924 126.976Z" fill="black"/> <path d="M1650.44 343.198V304.479H1515.13V388.065C1515.13 396.481 1514.91 403.422 1514.69 409.925L1648.58 399.706C1649.92 383.12 1650.44 364.648 1650.44 343.198Z" fill="black"/> <path d="M1465.8 393.175V151.351C1465.8 124.792 1467.42 107.796 1470.5 99.7077C1473.59 91.6196 1480.48 88.122 1491.63 88.122C1501.43 88.122 1507.83 91.3464 1510.92 97.7404C1514 104.134 1515.12 120.748 1515.12 146.679V255.568H1650.44V188.048C1650.44 139.465 1646.39 103.724 1638.3 80.8264C1630.11 58.1469 1613.11 38.6917 1587.21 22.8434C1561.11 7.92411 1528.24 0 1488.56 0C1459.16 0 1433.1 4.94583 1410.66 14.7554C1387.9 25.0295 1370.08 38.6918 1357.54 55.961C1345.28 71.7054 1337.34 90.3858 1334.54 110.146C1331.8 128.863 1330.55 157.117 1330.55 194.524V346.723C1330.23 372.486 1331.77 398.238 1335.16 423.778L1466.32 413.75C1466.08 407.629 1465.8 401.044 1465.8 393.175Z" fill="black"/> <path d="M1824.8 11.1746H1689.57V318.987C1689.57 351.175 1689.87 376.888 1690.69 396.589L1824.8 386.369V11.1746Z" fill="black"/> <path d="M1999.23 11.1746H1863.98V383.337L1999.23 373.035V11.1746Z" fill="black"/> <path d="M2334.43 115.145V11.1746H2038.34V115.145H2118.51V363.69L2253.82 353.607V115.145H2334.43Z" fill="black"/> <path d="M1117.09 296.635H1124.63C1143.27 296.635 1154.69 299.805 1159.06 306.855C1163.27 312.948 1165.59 328.25 1165.89 352.514C1165.89 354.208 1165.89 425.17 1165.89 436.674L1291.58 427.083V394.294C1291.58 352.268 1290.46 326.528 1288.25 317.293C1284.93 305.884 1279.04 295.387 1271.04 286.607C1261.58 275.349 1243.56 266.441 1216.96 259.884C1246.42 256.96 1266.34 248.626 1276.31 234.69C1286.28 220.755 1291.45 193.539 1291.45 153.044C1291.45 108.669 1284.26 76.2892 1270.24 56.0416C1256.23 35.794 1237.45 22.8422 1214.77 17.9784C1192.1 13.1146 1149 11.1746 1085.04 11.1746H989.237V450.145L1117.09 440.39V296.635ZM1117.09 99.8977H1124.63C1140.18 99.8977 1151.27 102.33 1156.96 107.822C1162.8 112.686 1165.73 122.741 1165.89 138.671V172.964C1165.54 193.512 1162.48 205.426 1156.96 209.224C1150.53 213.732 1140.01 215.7 1124.63 215.7H1117.09V99.8977Z" fill="black"/> <path d="M288.084 503.674C297.204 494.512 303.729 483.093 306.993 470.584C311.173 454.791 313.551 423.613 313.551 376.724V194.523C313.551 145.12 311.938 111.921 308.714 95.3892C305.688 78.3871 298.062 62.5389 286.663 49.5657C274.613 35.9034 256.879 26.0119 233.926 19.5086C210.755 13.7431 166.735 11.0652 101.375 11.0652H0V525.643L288.084 503.674ZM128.781 99.7885H135.312C150.395 99.7885 160.396 101.401 165.369 104.625C168.052 106.178 170.376 108.281 172.189 110.796C174.002 113.311 175.263 116.18 175.889 119.216C177.477 130.072 178.199 141.036 178.048 152.006V378.691C177.556 406.508 175.315 423.75 171.435 430.608C166.926 438.286 155.259 442.358 135.312 442.358H128.781V99.7885Z" fill="black"/> </clipPath> </svg> <div class="video_home_background"> <video class="video" width="100%" muted autoplay loop> <source type="video/mp4" src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> </video> </div>