蒙面的 svg 元素不显示整个 svg 项目
Posted
技术标签:
【中文标题】蒙面的 svg 元素不显示整个 svg 项目【英文标题】：Masked svg element not showing whole svg item 【发布时间】：2020-05-30 08:40:34 【问题描述】：在此示例中，我尝试使用 transform: translate 和 animation: infinite 滚动蒙版容器项。
问题是被屏蔽的容器项目只有一小部分在滚动。我如何让它像在下面的 imgur 链接中那样滚动？
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
text-align: center;
margin: 20px;
#code-main
animation: code 3s infinite;
@keyframes code
from
transform: translate(0px, 0px);
to
transform: translate(0px, 150px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<svg viewBox="0 0 712 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_feeling_proud_qne1 1">
<g clip-path="url(#clip0)">
<g id="guy">
<path id="Vector" d="M516.326 380.047V565.042L547.27 615.472L549.625 619.308H671.722L674.189 380.047H516.326Z" fill="#E6E6E6"/>
<path id="Vector_2" opacity="0.1" d="M516.326 380.047V565.042L547.27 615.472L549.169 380.047H516.326Z" fill="black"/>
<path id="Vector_3" d="M221.566 375.113V560.109L190.622 610.539L188.267 614.374H66.17L63.703 375.113H221.566Z" fill="#E6E6E6"/>
<path id="Vector_4" opacity="0.1" d="M221.566 375.113V560.109L190.622 610.539L188.723 375.113H221.566Z" fill="black"/>
<path id="Vector_5" d="M711.188 371.414V382.513H47.67V366.48L109.335 334.414H656.923L711.188 371.414Z" fill="#E6E6E6"/>
<path id="Vector_6" opacity="0.1" d="M711.188 371.414V382.513H47.67V366.48L711.188 371.414Z" fill="black"/>
<path id="Vector_7" d="M142.635 426.912H113.035L100.702 418.279H156.201L142.635 426.912Z" fill="#3F3D56"/>
<path id="Vector_8" d="M142.635 462.678H113.035L100.702 454.045H156.201L142.635 462.678Z" fill="#3F3D56"/>
<path id="Vector_9" d="M142.635 513.244H113.035L100.702 504.61H156.201L142.635 513.244Z" fill="#3F3D56"/>
<path id="Vector_10" d="M142.635 563.809H113.035L100.702 555.176H156.201L142.635 563.809Z" fill="#3F3D56"/>
<path id="Vector_11" d="M595.257 431.845H624.857L637.19 423.212H581.691L595.257 431.845Z" fill="#3F3D56"/>
<path id="Vector_12" d="M595.257 467.611H624.857L637.19 458.978H581.691L595.257 467.611Z" fill="#3F3D56"/>
<path id="Vector_13" d="M595.257 518.177H624.857L637.19 509.544H581.691L595.257 518.177Z" fill="#3F3D56"/>
<path id="Vector_14" d="M595.257 568.742H624.857L637.19 560.109H581.691L595.257 568.742Z" fill="#3F3D56"/>
<path id="Vector_15" d="M490.821 127.605C491.695 127.605 492.403 126.897 492.403 126.023C492.403 125.149 491.695 124.44 490.821 124.44C489.947 124.44 489.239 125.149 489.239 126.023C489.239 126.897 489.947 127.605 490.821 127.605Z" fill="#F2F2F2"/>
<path id="Vector_16" d="M490.821 300.387C494.142 300.387 496.834 297.695 496.834 294.374C496.834 291.053 494.142 288.362 490.821 288.362C487.5 288.362 484.809 291.053 484.809 294.374C484.809 297.695 487.5 300.387 490.821 300.387Z" fill="#F2F2F2"/>
<path id="Vector_17" d="M481.452 357.981V361.146H311.202V358.614L311.436 357.981L315.632 346.589H477.971L481.452 357.981Z" fill="#3F3D56"/>
<path id="Vector_18" d="M546.97 354.883C546.659 356.208 545.489 357.607 542.843 358.93C533.35 363.677 514.046 357.664 514.046 357.664C514.046 357.664 499.173 355.133 499.173 348.487C499.59 348.201 500.026 347.942 500.477 347.712C504.468 345.6 517.702 340.39 541.167 347.932C542.896 348.475 544.44 349.487 545.628 350.855C546.154 351.373 546.55 352.008 546.783 352.708C547.016 353.408 547.08 354.153 546.97 354.883Z" fill="#3F3D56"/>
<path id="Vector_19" opacity="0.1" d="M546.97 354.883C535.35 359.335 524.992 359.667 514.363 352.284C510.343 349.313 505.476 347.71 500.477 347.712C504.468 345.6 517.702 340.39 541.167 347.932C542.896 348.475 544.44 349.487 545.628 350.855C546.154 351.373 546.55 352.008 546.783 352.708C547.016 353.408 547.08 354.153 546.97 354.883Z" fill="black"/>
<path id="Vector_20" d="M532.4 352.284C534.672 352.284 536.514 351.718 536.514 351.019C536.514 350.32 534.672 349.753 532.4 349.753C530.128 349.753 528.286 350.32 528.286 351.019C528.286 351.718 530.128 352.284 532.4 352.284Z" fill="#F2F2F2"/>
<path id="Vector_21" opacity="0.1" d="M481.452 357.981V361.146H311.202V358.614L311.436 357.981H481.452Z" fill="black"/>
<path id="Vector_22" d="M94.6615 0.0286924C92.9336 -0.113172 91.2035 0.273333 89.7002 1.13699C88.2242 2.14779 87.2939 3.91861 86.3443 5.56646C82.7136 11.9421 77.7985 17.4942 71.9101 21.8711C67.6211 25.0131 62.1684 28.9308 62.9022 34.7238C63.2893 36.6369 63.996 38.4711 64.9927 40.1493C68.9493 48.1363 79.7463 54.3086 78.6843 63.4224C82.6153 56.8415 77.3573 53.5874 81.2883 47.0065C83.1604 43.8725 86.4124 40.3348 89.2388 42.303C90.1852 42.962 90.8066 44.1439 91.792 44.7222C94.1432 46.1019 96.6446 43.4642 98.7259 41.5958C105.903 35.1532 116.109 36.841 125.04 38.8484C129.256 39.7961 133.887 41.0394 136.379 45.0691C139.656 50.3673 133.266 56.0894 131.651 62.0796C131.52 62.59 131.513 63.1248 131.633 63.6381C131.753 64.1514 131.996 64.6281 132.34 65.0273C132.684 65.4266 133.12 65.7365 133.61 65.9305C134.1 66.1246 134.63 66.1971 135.154 66.1417C137.834 65.8774 141.009 65.6607 141.167 64.4848C144.539 64.6048 148.67 64.223 150.114 60.7123C150.556 59.3233 150.789 57.8765 150.807 56.4191C151.337 50.5219 153.84 45.1419 155.498 39.5292C157.156 33.9164 157.877 27.3387 155.079 22.3624C154.08 20.7067 152.845 19.2057 151.413 17.9068C135.534 2.54006 114.657 0.00588238 94.6615 0.0286924Z" fill="#2F2E41"/>
<path id="Vector_23" d="M82.1377 74.9337C82.1377 74.9337 85.5911 103.712 72.9286 106.014C60.2661 108.317 84.4399 147.455 84.4399 147.455L141.997 154.362L128.183 108.317C128.183 108.317 118.974 104.863 124.73 81.8406C130.485 58.8178 82.1377 74.9337 82.1377 74.9337Z" fill="#FFB8B8"/>
<path id="Vector_24" d="M47.028 569.347L51.633 632.66H75.806L68.9 569.347H47.028Z" fill="#FFB8B8"/>
<path id="Vector_25" d="M224.303 449.629L227.756 502.581L254.233 491.07L243.872 447.327L224.303 449.629Z" fill="#FFB8B8"/>
<path id="Vector_26" d="M29.761 327.608C29.761 327.608 30.9121 394.374 37.819 416.246C44.7259 438.117 43.5747 439.268 42.4236 442.722C41.2724 446.175 40.1213 443.873 40.1213 449.629C40.1213 455.384 37.819 546.324 40.1213 554.382C42.4235 562.44 33.2145 576.254 40.1213 577.405C47.0281 578.556 79.2599 577.405 80.411 570.498C81.5622 563.591 71.202 561.289 75.8065 556.684C80.4111 552.08 87.3179 457.687 87.3179 457.687L103.434 392.072L133.363 357.538H196.676L216.245 433.513C216.245 433.513 208.187 455.384 213.943 455.384C219.699 455.384 254.233 462.291 254.233 436.966C254.233 411.641 242.721 336.817 240.419 334.515C238.117 332.213 241.57 324.155 238.117 320.701C234.663 317.248 194.374 293.074 179.409 288.47C164.444 283.865 143.451 278.385 143.451 278.385L29.761 327.608Z" fill="#2F2E41"/>
<path id="Vector_27" d="M254.233 481.86C254.233 481.86 236.966 476.105 228.908 493.372C220.85 510.639 224.303 515.243 224.303 515.243C224.303 515.243 250.779 524.452 255.384 519.848C257.387 517.845 263.748 517.149 270.296 517.002C280.269 516.778 282.923 502.668 273.504 499.383C273.223 499.285 272.939 499.2 272.651 499.127C263.442 496.825 254.233 481.86 254.233 481.86Z" fill="#2F2E41"/>
<path id="Vector_28" d="M108.038 93.9275C127.111 93.9275 142.572 78.4661 142.572 59.3934C142.572 40.3208 127.111 24.8593 108.038 24.8593C88.9656 24.8593 73.5042 40.3208 73.5042 59.3934C73.5042 78.4661 88.9656 93.9275 108.038 93.9275Z" fill="#FFB8B8"/>
<path id="Vector_29" d="M63.144 120.404C63.144 120.404 119.55 131.915 133.363 113.497C147.177 95.0786 152.933 165.298 152.933 165.298L159.839 238.971L149.479 279.26C149.479 279.26 95.3758 323.004 78.1087 326.457C60.8417 329.91 34.3655 332.213 34.3655 332.213C34.3655 332.213 42.4236 204.437 42.4236 202.134C42.4236 199.832 63.144 120.404 63.144 120.404Z" fill="#6C63FF"/>
<path id="Vector_30" d="M80.2983 98.8144C80.2983 98.8144 67.7485 91.6252 64.2951 98.532C60.8417 105.439 28.6099 122.706 25.1565 122.706C21.7031 122.706 32.0633 218.25 27.4587 229.762C22.8542 241.273 0.982611 325.306 13.6451 332.213C26.3076 339.119 17.0985 325.306 29.761 342.573C42.4235 359.84 104.585 359.84 108.038 352.933C111.492 346.026 80.411 294.225 86.1667 245.877C91.9224 197.53 101.131 130.764 93.0735 121.555C85.0156 112.346 80.2983 98.8144 80.2983 98.8144Z" fill="#2F2E41"/>
<path id="Vector_31" d="M121.852 106.59L123.455 101.072C123.455 101.072 171.351 116.95 173.653 127.31C175.955 137.671 174.804 210.192 166.746 215.948C158.688 221.704 147.177 230.913 155.235 244.726C163.293 258.54 172.502 273.505 179.409 274.656C186.316 275.807 198.978 283.865 195.525 291.923C192.071 299.981 150.63 285.016 150.63 285.016C150.63 285.016 123.003 264.296 124.154 232.064C125.305 199.832 121.852 106.59 121.852 106.59Z" fill="#2F2E41"/>
<path id="Vector_32" d="M162.142 242.424L134.514 294.225C134.514 294.225 94.2246 335.666 117.247 340.271C140.27 344.875 152.933 302.283 152.933 302.283L182.862 259.691L162.142 242.424Z" fill="#FFB8B8"/>
<path id="Vector_33" d="M96.3438 9.06446C94.9518 8.96132 93.5575 9.23175 92.3051 9.8478C91.1726 10.6749 90.2393 11.7445 89.5733 12.9785C86.5029 17.5971 82.5005 21.5224 77.8232 24.5025C74.3318 26.7233 69.893 29.4922 70.4904 33.5867C70.8146 34.9595 71.3917 36.2599 72.1922 37.4214C75.4241 43.1236 76.7108 49.7234 75.8574 56.2221L85.4575 42.2681C86.9814 40.053 89.6287 37.5526 91.9296 38.9437C92.6999 39.4095 93.2058 40.2449 94.0079 40.6535C95.9219 41.6287 97.9581 39.7644 99.6524 38.4439C105.495 33.8903 113.803 35.0832 121.073 36.502C124.505 37.1718 128.275 38.0506 130.304 40.8987C133.676 45.6319 130.155 52.4709 132.123 57.9388C132.674 57.5531 133.141 57.0608 133.498 56.491C133.855 55.9211 134.095 55.2855 134.201 54.6216C136.946 54.7064 140.309 54.4366 141.485 51.9552C141.842 50.9828 142.033 49.9568 142.049 48.9208C142.48 44.7527 144.518 40.9502 145.867 36.9831C147.217 33.0161 147.804 28.367 145.526 24.8497C144.693 23.658 143.687 22.5967 142.542 21.7006C129.616 10.8395 112.621 9.04834 96.3438 9.06446Z" fill="#2F2E41"/>
<path id="Vector_34" d="M162.142 122.706L172.867 125.553C172.867 125.553 197.827 189.472 192.071 233.215C186.316 276.958 182.862 267.749 182.862 267.749C182.862 267.749 173.653 247.029 152.933 251.633L162.142 122.706Z" fill="#2F2E41"/>
<path id="Vector_35" d="M48.6229 624.292C45.847 628.064 46.4035 633.456 43.9446 637.443C41.8132 640.898 37.7962 642.71 35.1302 645.771C34.2795 646.788 33.5212 647.879 32.8641 649.031C30.391 653.174 28.3808 658.483 30.8165 662.648C32.7758 665.998 36.8943 667.307 40.6715 668.2C45.4455 669.328 50.4058 670.23 55.235 669.368C60.0642 668.506 64.7838 665.549 66.5057 660.956C66.8441 659.801 67.2464 658.666 67.7108 657.555C70.3282 652.402 78.5383 652.347 81.217 647.225C83.0917 643.641 81.3684 639.309 79.6459 635.649L74.3848 624.472C72.6389 620.763 65.5611 622.896 61.8714 622.007C57.0591 620.848 52.0848 619.571 48.6229 624.292Z" fill="#2F2E41"/>
<path id="Vector_36" d="M10.1917 265.447L58.5394 340.271C58.5394 340.271 88.4689 378.258 97.678 360.991C106.887 343.724 65.4462 314.946 65.4462 314.946L34.3655 257.389L10.1917 265.447Z" fill="#FFB8B8"/>
<path id="Vector_37" d="M34.3655 125.008L25.1564 122.706C25.1564 122.706 6.73827 128.462 2.13372 152.635C-2.47081 176.809 0.982583 273.505 6.73826 274.656C12.4939 275.807 35.1655 257.819 38.7945 261.633C42.4235 265.447 30.9121 245.877 34.3655 235.517C37.8189 225.157 34.3655 125.008 34.3655 125.008Z" fill="#2F2E41"/>
<path id="Vector_38" d="M615.414 120.485H366.228C364.991 120.485 363.765 120.728 362.622 121.202C361.478 121.675 360.439 122.37 359.564 123.245C358.689 124.12 357.995 125.159 357.522 126.302C357.048 127.446 356.804 128.671 356.805 129.909V297.766C356.804 299.004 357.048 300.23 357.522 301.373C357.995 302.516 358.689 303.555 359.564 304.43C360.439 305.306 361.478 306 362.622 306.473C363.765 306.947 364.991 307.19 366.228 307.19H460.821L457.277 329.817C457.277 329.817 437.025 340.576 451.265 340.892C465.505 341.209 532.593 340.892 532.593 340.892C532.593 340.892 545.567 340.892 524.998 329.5L521.664 307.19H615.414C616.651 307.19 617.877 306.947 619.02 306.473C620.164 306 621.203 305.306 622.078 304.43C622.953 303.555 623.647 302.516 624.121 301.373C624.594 300.23 624.838 299.004 624.838 297.766V129.909C624.838 128.671 624.594 127.446 624.121 126.302C623.647 125.159 622.953 124.12 622.078 123.245C621.203 122.37 620.164 121.675 619.02 121.202C617.877 120.728 616.651 120.485 615.414 120.485Z" fill="#3F3D56"/>
</g>
<path id="Vector_39" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="366" y="130" >
<path id="Vector_40" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
</mask>
<g mask="url(#mask0)">
<g id="code-main" filter="url(#filter0_d)">
<g id="code-main_2">
<g id="Group 15">
<path id="Rectangle 59" d="M424.752 164.345H395V171.444H424.752V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 60" d="M527.784 164.345H517.315V171.444H527.784V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 61" d="M548.721 164.345H538.252V171.444H548.721V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 62" d="M506.296 164.345H435.221V171.444H506.296V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 63" d="M547.619 134.308H517.866V141.408H547.619V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 64" d="M587.839 134.308H558.087V141.408H587.839V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 66" d="M405.468 134.308H395V141.408H405.468V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 67" d="M426.405 134.308H415.937V141.408H426.405V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 68" d="M507.949 134.308H436.874V141.408H507.949V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 69" d="M485.91 149.6H456.158V156.699H485.91V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 70" d="M445.689 149.6H415.937V156.699H445.689V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 71" d="M405.468 149.6H395V156.699H405.468V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 73" d="M587.839 149.6H577.371V156.699H587.839V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 74" d="M566.902 149.6H495.827V156.699H566.902V149.6Z" fill="#6C63FF"/>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="391" y="-181" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect fill="white"/>
</clipPath>
</defs>
</svg>
</body>
</html>Codepen：https://codepen.io/DevKris/pen/KKpVxVa
期望的结果：https://imgur.com/a/lG7vgem
【问题讨论】：
【参考方案1】：您需要多次重复使用#Group15：
我也将使用ids 没有sapces：即id="Group15" 而不是id="Group 15"
我希望这是你的要求。
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
text-align:center;
margin: 20px;
#code-main
animation: code 3s infinite;
@keyframes code
from
transform: translate(0px, 0px);
to
transform: translate(0px, 150px);
<svg viewBox="0 0 712 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_feeling_proud_qne1 1">
<g clip-path="url(#clip0)">
<g id="guy">
<path id="Vector_38" d="M615.414 120.485H366.228C364.991 120.485 363.765 120.728 362.622 121.202C361.478 121.675 360.439 122.37 359.564 123.245C358.689 124.12 357.995 125.159 357.522 126.302C357.048 127.446 356.804 128.671 356.805 129.909V297.766C356.804 299.004 357.048 300.23 357.522 301.373C357.995 302.516 358.689 303.555 359.564 304.43C360.439 305.306 361.478 306 362.622 306.473C363.765 306.947 364.991 307.19 366.228 307.19H460.821L457.277 329.817C457.277 329.817 437.025 340.576 451.265 340.892C465.505 341.209 532.593 340.892 532.593 340.892C532.593 340.892 545.567 340.892 524.998 329.5L521.664 307.19H615.414C616.651 307.19 617.877 306.947 619.02 306.473C620.164 306 621.203 305.306 622.078 304.43C622.953 303.555 623.647 302.516 624.121 301.373C624.594 300.23 624.838 299.004 624.838 297.766V129.909C624.838 128.671 624.594 127.446 624.121 126.302C623.647 125.159 622.953 124.12 622.078 123.245C621.203 122.37 620.164 121.675 619.02 121.202C617.877 120.728 616.651 120.485 615.414 120.485Z" fill="#3F3D56"/>
</g>
<path id="Vector_39" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
<mask id="mask0">
<path id="Vector_40" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
</mask>
<g mask="url(#mask0)" >
<g id="code-main" filter="url(#filter0_d)">
<g id="code-main_2">
<g id="Group15">
<path id="Rectangle59" d="M424.752 164.345H395V171.444H424.752V164.345Z" fill="#6C63FF"/>
<path id="Rectangle60" d="M527.784 164.345H517.315V171.444H527.784V164.345Z" fill="#6C63FF"/>
<path id="Rectangle61" d="M548.721 164.345H538.252V171.444H548.721V164.345Z" fill="#6C63FF"/>
<path id="Rectangle62" d="M506.296 164.345H435.221V171.444H506.296V164.345Z" fill="#6C63FF"/>
<path id="Rectangle63" d="M547.619 134.308H517.866V141.408H547.619V134.308Z" fill="#6C63FF"/>
<path id="Rectangle64" d="M587.839 134.308H558.087V141.408H587.839V134.308Z" fill="#6C63FF"/>
<path id="Rectangle66" d="M405.468 134.308H395V141.408H405.468V134.308Z" fill="#6C63FF"/>
<path id="Rectangle67" d="M426.405 134.308H415.937V141.408H426.405V134.308Z" fill="#6C63FF"/>
<path id="Rectangle68" d="M507.949 134.308H436.874V141.408H507.949V134.308Z" fill="#6C63FF"/>
<path id="Rectangle69" d="M485.91 149.6H456.158V156.699H485.91V149.6Z" fill="#6C63FF"/>
<path id="Rectangle70" d="M445.689 149.6H415.937V156.699H445.689V149.6Z" fill="#6C63FF"/>
<path id="Rectangle71" d="M405.468 149.6H395V156.699H405.468V149.6Z" fill="#6C63FF"/>
<path id="Rectangle73" d="M587.839 149.6H577.371V156.699H587.839V149.6Z" fill="#6C63FF"/>
<path id="Rectangle74" d="M566.902 149.6H495.827V156.699H566.902V149.6Z" fill="#6C63FF"/>
</g>
<use xlink:href="#Group15" y="-45" />
<use xlink:href="#Group15" y="-90" />
<use xlink:href="#Group15" y="-135" />
<use xlink:href="#Group15" y="-180" />
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="391" y="-181" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect fill="white"/>
</clipPath>
</defs>
</svg>【讨论】：
以上是关于蒙面的 svg 元素不显示整个 svg 项目的主要内容，如果未能解决你的问题，请参考以下文章