如何让内嵌式SVG蒙板响应式？

问题描述 投票：0回答：1

在过去的几天里，我第一次尝试使用SVG。 我一直在尝试制作一个响应的蒙板，但没有成功。 我知道有很多关于这方面的问题和答案，但似乎没有一个在我的情况下有效。

谁能给我一个提示，我到底缺少什么？

html {
  background: url(https://i.picsum.photos/id/10/800/800.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

svg {
  width: 100vw;
  height: 100vh;
}

.alpha {
  fill: #bbb;
}

.base {
  fill: white;
  mask: url(#mask);
}

.svg-container {
  width: 100%;
}
<div class="svg-container">
  <svg viewBox="0 0 100% 100%" preserveAspectRatio="xMinYMin meet">
            <defs>
                <mask id="mask">
                    <rect class="alpha" x="0" y="0" width="100%" height="100%" class="logo" />
                    <g transform="translate(600, 20)">
                        <path
                            d="M389.3281,361.9072a7.965,7.965,0,0,0-1.873-3.7373,9.99,9.99,0,0,0-4.12-2.74,20.6223,20.6223,0,0,0-7.1162-.9981A68.3914,68.3914,0,0,0,349.5,359.665a101.7,101.7,0,0,0-23.1,13.4541,130.8726,130.8726,0,0,0-19.3516,18.4375,225.7625,225.7625,0,0,0-15.4824,20.1817A204.9809,204.9809,0,0,0,279.58,432.17a49.0016,49.0016,0,0,0-5.4942,22.6739,35.7828,35.7828,0,0,0,1.125,8.72,23.2838,23.2838,0,0,0,3.7442,8.0986,20.967,20.967,0,0,0,6.8681,5.9785,21.2738,21.2738,0,0,0,10.4873,2.3672,25.179,25.179,0,0,0,7.9913-1.2461,55.8477,55.8477,0,0,0,7.2412-2.99,19.6477,19.6477,0,0,0,6.8672,3.8633,23.9691,23.9691,0,0,0,7.1171,1.1211,8.1121,8.1121,0,0,0,5.9922-2.2422,6.9043,6.9043,0,0,0,2.2481-4.9844q0-3.9873-1.7481-5.73-1.749-1.746-1.498-1.7441-2.001,0-1.9981,1.7441v-.249a3.6394,3.6394,0,0,0,.75,1.62,6.057,6.057,0,0,1,.1241,5.6055q-.6255,1.2437-3.37,1.2461a13.585,13.585,0,0,1-8.74-3.2383,210.2969,210.2969,0,0,0,20.2266-15.4492,164.3653,164.3653,0,0,0,17.7285-17.9385A151.53,151.53,0,0,0,370.35,417.9678a205.8819,205.8819,0,0,0,12.8613-26.4112q2.4932-5.9795,4.4942-12.457a45.4466,45.4466,0,0,0,1.998-13.4551A20.3111,20.3111,0,0,0,389.3281,361.9072Zm-22.4746,42.7305A271.85,271.85,0,0,1,349.5,430.9238a133.9406,133.9406,0,0,1-18.6035,20.0567q-10.1148,8.8417-20.1035,10.8388c-.334-.9961-.791-2.2031-1.3721-3.6123a14.5883,14.5883,0,0,0-2.4971-3.9863,15.6058,15.6058,0,0,0-3.9961-3.24,11.0871,11.0871,0,0,0-5.6181-1.3692,10.6558,10.6558,0,0,0-6.4932,2.49q-3.2461,2.49-3.2461,7.4755,0,4.235,2.1231,6.4776a15.3984,15.3984,0,0,0,4.8691,3.4883,17.1522,17.1522,0,0,0,5.6191,1.4961c1.9122.1621,3.2852.248,4.12.248a9.3432,9.3432,0,0,0,1.498-.123,8.8078,8.8078,0,0,1,1.499-.125c.1631.1621.2491.2871.2491.373,0,.082.082.2061.249.3731a38.3275,38.3275,0,0,1-12.7344,2.7421,12.7147,12.7147,0,0,1-10.6133-5.4824,19.8407,19.8407,0,0,1-4.12-12.209,55.83,55.83,0,0,1,4.62-21.5527,102.6148,102.6148,0,0,1,12.36-21.5508,150.4226,150.4226,0,0,1,38.58-36.1289,116.9428,116.9428,0,0,1,21.7256-11.0869,57.1271,57.1271,0,0,1,20.1016-4.1113q2.4932,0,2.9961.872a8.4641,8.4641,0,0,1,.5,3.6133,16.3609,16.3609,0,0,1-.375,3.1153q-.375,1.8662-.874,4.6093A139.3888,139.3888,0,0,1,366.8535,404.6377Zm-68.2949,56.6836q-2.2472-.7472-2.2481-1.9932c0-.666.5-.9961,1.4991-.9961l2.4961.9961a4.275,4.275,0,0,1,2.497,2.99A22.3469,22.3469,0,0,1,298.5586,461.3213Z" />
                        <path
                            d="M426.4082,397.5371a1.0225,1.0225,0,0,0-.749.249h-.249q-1.254,1.25-4.6192,4.4844-3.3735,3.2416-8.1172,7.8486-4.746,4.6143-9.9883,10.59-5.244,5.9794-9.4882,11.4609-2.751,3.7383-9.2393,6.3535-6.4965,2.6163-11.9863,4.6094c-.169.168-.293.249-.375.249-.085,0-.21.086-.374.2491a75.8391,75.8391,0,0,1,5.7421-9.4688q3.4951-4.9789,7.2422-9.9658,3.7456-4.9789,7.3672-9.4678,3.6153-4.4853,6.1172-7.9726v-.2491a5.3586,5.3586,0,0,0-1.9971-3.8623,4.9537,4.9537,0,0,0-3.9951-1.6191q-.75.747-4.62,4.7334a128.4673,128.4673,0,0,0-8.49,9.8428,133.5017,133.5017,0,0,0-10.2383,15.5722q-5.6176,9.7149-4.8692,13.4541a8.4447,8.4447,0,0,0,1.4991,3.7373,4.7,4.7,0,0,0,4.2441,2.4922,12.8621,12.8621,0,0,0,5.3682-1.4961q3.12-1.4941,5.9931-3.2392,2.8682-1.7388,7.1172-4.7334-1.0019,1.746-.999,5.98a5.8654,5.8654,0,0,0,.874,2.9912q.8716,1.4942,3.8711,1.4941a9.1582,9.1582,0,0,0,3.9951-1.1211,41.91,41.91,0,0,0,4.4952-2.6162q2.247-1.4957,4.3691-3.1152,2.1182-1.6158,3.6211-2.6153,5.7421-3.9828,9.6133-6.8525,3.8687-2.8623,3.8711-3.3633a1.57,1.57,0,0,0-.8731-1.6191c-.5859-.25-.793-.375-.625-.375q-1.002,0-7.2422,4.3613-6.2447,4.3608-18.2285,9.5928a78.89,78.89,0,0,1,8.1152-10.7139q4.8692-5.4785,10.1133-10.7139,5.2441-5.2323,10.1133-9.9658a112.9213,112.9213,0,0,0,8.3662-8.9707l.249-.249a.5057.5057,0,0,1,.125-.374.5056.5056,0,0,0,.125-.3731,5.0369,5.0369,0,0,0-1.748-3.4882h0a5.0584,5.0584,0,0,0-3.4961-1.7442Z" />
                        <path
                            d="M462.1152,388.8164c0-.1641-.3349-.5371-.998-1.1211-.668-.58-1.3731-1.16-2.1231-1.7441-.748-.58-1.4589-1.0782-2.122-1.4951a3.9885,3.9885,0,0,0-1.2491-.6231,9.8182,9.8182,0,0,0-1.998,2.2422q-1.497,1.998-3.2461,4.36a53.2918,53.2918,0,0,0-2.9961,4.4844,12.759,12.759,0,0,0-1.248,2.3672l2.247,1.7451a62.4434,62.4434,0,0,0,8.6153-4.1123q4.1205-2.3641,5.1181-5.8535Zm-16.73,46.5918a.2222.2222,0,0,0-.2491-.248l-.249-.25q-.5039,0-7.2422,3.4882-6.7412,3.4923-11.3613,5.6065-4.6245,2.12-6.3682,1.6191a55.4894,55.4894,0,0,1,5.1192-9.7177q3.3707-5.23,7.3662-10.5889,3.9917-5.3541,7.8662-10.2158,3.8687-4.8575,6.3672-8.3457l.249-.4991q0-1.2437-1.8721-3.3632-1.8735-2.1138-3.37-2.1172a1.021,1.021,0,0,0-.75.249h-.25q-.7485.747-4.4941,4.9824-3.7472,4.2393-8.1162,10.2149-4.3727,5.9823-8.6153,13.207a72.1365,72.1365,0,0,0-5.7431,11.4609q-1.4971,4.2393-.9981,5.7305a7.9191,7.9191,0,0,0,1.4981,3.3633q1.497,2.3715,4.9941,2.3672a15.1886,15.1886,0,0,0,7.8653-2.74q4.3651-2.7392,7.99-4.9834,3.6182-2.2427,7.1172-4.6093,3.4952-2.3658,3.7461-2.6163v-.25a.5214.5214,0,0,0-.125-.373c-.086-.082-.125-.2891-.125-.623a1,1,0,0,1-.25-.7481Z" />
                        <path
                            d="M486.5869,402.0215c-.3349,0-.874.3349-1.623.9971q-1.1236.9975-2.3721,2.2421-2.2485.5025-5.1191,1.37-2.8741.8759-6.1172,1.8691a19.8132,19.8132,0,0,1,2.8711-3.3643,6.6774,6.6774,0,0,0,2.123-4.8584,12.8608,12.8608,0,0,0-.625-2.8652c-.418-1.4082-1.623-2.1172-3.6211-2.1172a9.234,9.234,0,0,0-4.1191,1.4942,34.1332,34.1332,0,0,0-5.2442,3.7373,27.3651,27.3651,0,0,0-4.4951,4.8584,8.5256,8.5256,0,0,0-1.8721,4.8593q0,3.4923,2.4961,4.4844a120.6446,120.6446,0,0,1-9.1142,9.5928q-5.1227,4.8588-9.6143,8.97-4.4942,4.11-7.6152,6.8516a20.9624,20.9624,0,0,0-3.1221,2.99c0,.833.335,1.2461.999,1.2461q.5025,0,4.6192-2.6162,4.1207-2.6162,9.7383-6.8525,5.6192-4.2335,11.7363-9.5928a96.894,96.894,0,0,0,10.8633-11.0869,11.1019,11.1019,0,0,0,4.9941-1.6192q2.9972-1.6172,4.4942-2.3672-2.2457,1.9981-5.3672,4.8575a53.499,53.499,0,0,0-5.8692,6.3545,45.92,45.92,0,0,0-4.7441,7.3505,16.898,16.898,0,0,0-1.9981,7.8477,7.1625,7.1625,0,0,0,2.4971,4.9834,60.9346,60.9346,0,0,0-11.4873,13.8291,122.4369,122.4369,0,0,0-8.3652,15.9453q-3.3691,7.8486-5.2442,13.8281-1.872,5.98-1.872,7.2266l.499.498a2.6518,2.6518,0,0,0,1.498.2481l.5-.2481a22.2683,22.2683,0,0,1,1.8731-4.2363q1.872-3.7368,4.9941-9.2187,3.12-5.483,7.3672-11.835a144.6219,144.6219,0,0,1,9.1133-12.208,93.9163,93.9163,0,0,1,10.1133-10.4658,30.92,30.92,0,0,1,10.4883-6.3526h.249a1.0148,1.0148,0,0,1,.25-.748,1.0166,1.0166,0,0,0,.25-.7481,9.3658,9.3658,0,0,0-.999-4.2343q-1-1.9923-2.2471-1.9942h-.25a12.51,12.51,0,0,0-4.7442,1.6192,40.9555,40.9555,0,0,0-7.2421,4.8593c-.835-.331-1.2491-.748-1.2491-1.246a3.4374,3.4374,0,0,1,1.2491-2.2422,55.7756,55.7756,0,0,1,5.9931-6.9766q3.4952-3.4863,7.1172-6.7266,3.6166-3.2373,6.9922-6.3535a59.1172,59.1172,0,0,0,5.6172-5.8554q0-1.2452-1.7471-3.7383-2.75-2.2413-3.4961-2.2422Z" />
                    </g>
                </mask>
            </defs>
            <rect class="base" x="0" y="0" width="100%" height="100%" />
        </svg>
</div>
css svg layout mask
1个回答
2
投票

使用它作为一个CSS掩码是比较容易的。简单地把正确的viewBox，然后你调整掩码-sizemask-位置，就像你做的背景。

html {
  background: url(https://i.picsum.photos/id/10/800/800.jpg) no-repeat center center fixed;
  background-size: cover;
}
html::before {
   --svg:url('data:image/svg+xml;utf8,<svg viewBox="200 300 380 250" xmlns="http://www.w3.org/2000/svg" version="1.1"  fill="black"><path d="M389.3281,361.9072a7.965,7.965,0,0,0-1.873-3.7373,9.99,9.99,0,0,0-4.12-2.74,20.6223,20.6223,0,0,0-7.1162-.9981A68.3914,68.3914,0,0,0,349.5,359.665a101.7,101.7,0,0,0-23.1,13.4541,130.8726,130.8726,0,0,0-19.3516,18.4375,225.7625,225.7625,0,0,0-15.4824,20.1817A204.9809,204.9809,0,0,0,279.58,432.17a49.0016,49.0016,0,0,0-5.4942,22.6739,35.7828,35.7828,0,0,0,1.125,8.72,23.2838,23.2838,0,0,0,3.7442,8.0986,20.967,20.967,0,0,0,6.8681,5.9785,21.2738,21.2738,0,0,0,10.4873,2.3672,25.179,25.179,0,0,0,7.9913-1.2461,55.8477,55.8477,0,0,0,7.2412-2.99,19.6477,19.6477,0,0,0,6.8672,3.8633,23.9691,23.9691,0,0,0,7.1171,1.1211,8.1121,8.1121,0,0,0,5.9922-2.2422,6.9043,6.9043,0,0,0,2.2481-4.9844q0-3.9873-1.7481-5.73-1.749-1.746-1.498-1.7441-2.001,0-1.9981,1.7441v-.249a3.6394,3.6394,0,0,0,.75,1.62,6.057,6.057,0,0,1,.1241,5.6055q-.6255,1.2437-3.37,1.2461a13.585,13.585,0,0,1-8.74-3.2383,210.2969,210.2969,0,0,0,20.2266-15.4492,164.3653,164.3653,0,0,0,17.7285-17.9385A151.53,151.53,0,0,0,370.35,417.9678a205.8819,205.8819,0,0,0,12.8613-26.4112q2.4932-5.9795,4.4942-12.457a45.4466,45.4466,0,0,0,1.998-13.4551A20.3111,20.3111,0,0,0,389.3281,361.9072Zm-22.4746,42.7305A271.85,271.85,0,0,1,349.5,430.9238a133.9406,133.9406,0,0,1-18.6035,20.0567q-10.1148,8.8417-20.1035,10.8388c-.334-.9961-.791-2.2031-1.3721-3.6123a14.5883,14.5883,0,0,0-2.4971-3.9863,15.6058,15.6058,0,0,0-3.9961-3.24,11.0871,11.0871,0,0,0-5.6181-1.3692,10.6558,10.6558,0,0,0-6.4932,2.49q-3.2461,2.49-3.2461,7.4755,0,4.235,2.1231,6.4776a15.3984,15.3984,0,0,0,4.8691,3.4883,17.1522,17.1522,0,0,0,5.6191,1.4961c1.9122.1621,3.2852.248,4.12.248a9.3432,9.3432,0,0,0,1.498-.123,8.8078,8.8078,0,0,1,1.499-.125c.1631.1621.2491.2871.2491.373,0,.082.082.2061.249.3731a38.3275,38.3275,0,0,1-12.7344,2.7421,12.7147,12.7147,0,0,1-10.6133-5.4824,19.8407,19.8407,0,0,1-4.12-12.209,55.83,55.83,0,0,1,4.62-21.5527,102.6148,102.6148,0,0,1,12.36-21.5508,150.4226,150.4226,0,0,1,38.58-36.1289,116.9428,116.9428,0,0,1,21.7256-11.0869,57.1271,57.1271,0,0,1,20.1016-4.1113q2.4932,0,2.9961.872a8.4641,8.4641,0,0,1,.5,3.6133,16.3609,16.3609,0,0,1-.375,3.1153q-.375,1.8662-.874,4.6093A139.3888,139.3888,0,0,1,366.8535,404.6377Zm-68.2949,56.6836q-2.2472-.7472-2.2481-1.9932c0-.666.5-.9961,1.4991-.9961l2.4961.9961a4.275,4.275,0,0,1,2.497,2.99A22.3469,22.3469,0,0,1,298.5586,461.3213Z" /><path d="M426.4082,397.5371a1.0225,1.0225,0,0,0-.749.249h-.249q-1.254,1.25-4.6192,4.4844-3.3735,3.2416-8.1172,7.8486-4.746,4.6143-9.9883,10.59-5.244,5.9794-9.4882,11.4609-2.751,3.7383-9.2393,6.3535-6.4965,2.6163-11.9863,4.6094c-.169.168-.293.249-.375.249-.085,0-.21.086-.374.2491a75.8391,75.8391,0,0,1,5.7421-9.4688q3.4951-4.9789,7.2422-9.9658,3.7456-4.9789,7.3672-9.4678,3.6153-4.4853,6.1172-7.9726v-.2491a5.3586,5.3586,0,0,0-1.9971-3.8623,4.9537,4.9537,0,0,0-3.9951-1.6191q-.75.747-4.62,4.7334a128.4673,128.4673,0,0,0-8.49,9.8428,133.5017,133.5017,0,0,0-10.2383,15.5722q-5.6176,9.7149-4.8692,13.4541a8.4447,8.4447,0,0,0,1.4991,3.7373,4.7,4.7,0,0,0,4.2441,2.4922,12.8621,12.8621,0,0,0,5.3682-1.4961q3.12-1.4941,5.9931-3.2392,2.8682-1.7388,7.1172-4.7334-1.0019,1.746-.999,5.98a5.8654,5.8654,0,0,0,.874,2.9912q.8716,1.4942,3.8711,1.4941a9.1582,9.1582,0,0,0,3.9951-1.1211,41.91,41.91,0,0,0,4.4952-2.6162q2.247-1.4957,4.3691-3.1152,2.1182-1.6158,3.6211-2.6153,5.7421-3.9828,9.6133-6.8525,3.8687-2.8623,3.8711-3.3633a1.57,1.57,0,0,0-.8731-1.6191c-.5859-.25-.793-.375-.625-.375q-1.002,0-7.2422,4.3613-6.2447,4.3608-18.2285,9.5928a78.89,78.89,0,0,1,8.1152-10.7139q4.8692-5.4785,10.1133-10.7139,5.2441-5.2323,10.1133-9.9658a112.9213,112.9213,0,0,0,8.3662-8.9707l.249-.249a.5057.5057,0,0,1,.125-.374.5056.5056,0,0,0,.125-.3731,5.0369,5.0369,0,0,0-1.748-3.4882h0a5.0584,5.0584,0,0,0-3.4961-1.7442Z" /><path d="M462.1152,388.8164c0-.1641-.3349-.5371-.998-1.1211-.668-.58-1.3731-1.16-2.1231-1.7441-.748-.58-1.4589-1.0782-2.122-1.4951a3.9885,3.9885,0,0,0-1.2491-.6231,9.8182,9.8182,0,0,0-1.998,2.2422q-1.497,1.998-3.2461,4.36a53.2918,53.2918,0,0,0-2.9961,4.4844,12.759,12.759,0,0,0-1.248,2.3672l2.247,1.7451a62.4434,62.4434,0,0,0,8.6153-4.1123q4.1205-2.3641,5.1181-5.8535Zm-16.73,46.5918a.2222.2222,0,0,0-.2491-.248l-.249-.25q-.5039,0-7.2422,3.4882-6.7412,3.4923-11.3613,5.6065-4.6245,2.12-6.3682,1.6191a55.4894,55.4894,0,0,1,5.1192-9.7177q3.3707-5.23,7.3662-10.5889,3.9917-5.3541,7.8662-10.2158,3.8687-4.8575,6.3672-8.3457l.249-.4991q0-1.2437-1.8721-3.3632-1.8735-2.1138-3.37-2.1172a1.021,1.021,0,0,0-.75.249h-.25q-.7485.747-4.4941,4.9824-3.7472,4.2393-8.1162,10.2149-4.3727,5.9823-8.6153,13.207a72.1365,72.1365,0,0,0-5.7431,11.4609q-1.4971,4.2393-.9981,5.7305a7.9191,7.9191,0,0,0,1.4981,3.3633q1.497,2.3715,4.9941,2.3672a15.1886,15.1886,0,0,0,7.8653-2.74q4.3651-2.7392,7.99-4.9834,3.6182-2.2427,7.1172-4.6093,3.4952-2.3658,3.7461-2.6163v-.25a.5214.5214,0,0,0-.125-.373c-.086-.082-.125-.2891-.125-.623a1,1,0,0,1-.25-.7481Z" /><path  d="M486.5869,402.0215c-.3349,0-.874.3349-1.623.9971q-1.1236.9975-2.3721,2.2421-2.2485.5025-5.1191,1.37-2.8741.8759-6.1172,1.8691a19.8132,19.8132,0,0,1,2.8711-3.3643,6.6774,6.6774,0,0,0,2.123-4.8584,12.8608,12.8608,0,0,0-.625-2.8652c-.418-1.4082-1.623-2.1172-3.6211-2.1172a9.234,9.234,0,0,0-4.1191,1.4942,34.1332,34.1332,0,0,0-5.2442,3.7373,27.3651,27.3651,0,0,0-4.4951,4.8584,8.5256,8.5256,0,0,0-1.8721,4.8593q0,3.4923,2.4961,4.4844a120.6446,120.6446,0,0,1-9.1142,9.5928q-5.1227,4.8588-9.6143,8.97-4.4942,4.11-7.6152,6.8516a20.9624,20.9624,0,0,0-3.1221,2.99c0,.833.335,1.2461.999,1.2461q.5025,0,4.6192-2.6162,4.1207-2.6162,9.7383-6.8525,5.6192-4.2335,11.7363-9.5928a96.894,96.894,0,0,0,10.8633-11.0869,11.1019,11.1019,0,0,0,4.9941-1.6192q2.9972-1.6172,4.4942-2.3672-2.2457,1.9981-5.3672,4.8575a53.499,53.499,0,0,0-5.8692,6.3545,45.92,45.92,0,0,0-4.7441,7.3505,16.898,16.898,0,0,0-1.9981,7.8477,7.1625,7.1625,0,0,0,2.4971,4.9834,60.9346,60.9346,0,0,0-11.4873,13.8291,122.4369,122.4369,0,0,0-8.3652,15.9453q-3.3691,7.8486-5.2442,13.8281-1.872,5.98-1.872,7.2266l.499.498a2.6518,2.6518,0,0,0,1.498.2481l.5-.2481a22.2683,22.2683,0,0,1,1.8731-4.2363q1.872-3.7368,4.9941-9.2187,3.12-5.483,7.3672-11.835a144.6219,144.6219,0,0,1,9.1133-12.208,93.9163,93.9163,0,0,1,10.1133-10.4658,30.92,30.92,0,0,1,10.4883-6.3526h.249a1.0148,1.0148,0,0,1,.25-.748,1.0166,1.0166,0,0,0,.25-.7481,9.3658,9.3658,0,0,0-.999-4.2343q-1-1.9923-2.2471-1.9942h-.25a12.51,12.51,0,0,0-4.7442,1.6192,40.9555,40.9555,0,0,0-7.2421,4.8593c-.835-.331-1.2491-.748-1.2491-1.246a3.4374,3.4374,0,0,1,1.2491-2.2422,55.7756,55.7756,0,0,1,5.9931-6.9766q3.4952-3.4863,7.1172-6.7266,3.6166-3.2373,6.9922-6.3535a59.1172,59.1172,0,0,0,5.6172-5.8554q0-1.2452-1.7471-3.7383-2.75-2.2413-3.4961-2.2422Z" /></svg>');
   content:"";
   position:fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background:rgba(255,255,255,0.8);
   -webkit-mask:
      var(--svg) center/contain no-repeat,
      linear-gradient(#fff,#fff);
   -webkit-mask-composite:destination-out;
   mask:
      var(--svg) center/contain no-repeat,
      linear-gradient(#fff,#fff);
   mask-composite:exclude;
}

如果你想要一个固定的大小。

html {
  background: url(https://i.picsum.photos/id/10/800/800.jpg) no-repeat center center fixed;
  background-size: cover;
}
html::before {
   --svg:url('data:image/svg+xml;utf8,<svg viewBox="200 300 380 250" xmlns="http://www.w3.org/2000/svg" version="1.1"  fill="black"><path d="M389.3281,361.9072a7.965,7.965,0,0,0-1.873-3.7373,9.99,9.99,0,0,0-4.12-2.74,20.6223,20.6223,0,0,0-7.1162-.9981A68.3914,68.3914,0,0,0,349.5,359.665a101.7,101.7,0,0,0-23.1,13.4541,130.8726,130.8726,0,0,0-19.3516,18.4375,225.7625,225.7625,0,0,0-15.4824,20.1817A204.9809,204.9809,0,0,0,279.58,432.17a49.0016,49.0016,0,0,0-5.4942,22.6739,35.7828,35.7828,0,0,0,1.125,8.72,23.2838,23.2838,0,0,0,3.7442,8.0986,20.967,20.967,0,0,0,6.8681,5.9785,21.2738,21.2738,0,0,0,10.4873,2.3672,25.179,25.179,0,0,0,7.9913-1.2461,55.8477,55.8477,0,0,0,7.2412-2.99,19.6477,19.6477,0,0,0,6.8672,3.8633,23.9691,23.9691,0,0,0,7.1171,1.1211,8.1121,8.1121,0,0,0,5.9922-2.2422,6.9043,6.9043,0,0,0,2.2481-4.9844q0-3.9873-1.7481-5.73-1.749-1.746-1.498-1.7441-2.001,0-1.9981,1.7441v-.249a3.6394,3.6394,0,0,0,.75,1.62,6.057,6.057,0,0,1,.1241,5.6055q-.6255,1.2437-3.37,1.2461a13.585,13.585,0,0,1-8.74-3.2383,210.2969,210.2969,0,0,0,20.2266-15.4492,164.3653,164.3653,0,0,0,17.7285-17.9385A151.53,151.53,0,0,0,370.35,417.9678a205.8819,205.8819,0,0,0,12.8613-26.4112q2.4932-5.9795,4.4942-12.457a45.4466,45.4466,0,0,0,1.998-13.4551A20.3111,20.3111,0,0,0,389.3281,361.9072Zm-22.4746,42.7305A271.85,271.85,0,0,1,349.5,430.9238a133.9406,133.9406,0,0,1-18.6035,20.0567q-10.1148,8.8417-20.1035,10.8388c-.334-.9961-.791-2.2031-1.3721-3.6123a14.5883,14.5883,0,0,0-2.4971-3.9863,15.6058,15.6058,0,0,0-3.9961-3.24,11.0871,11.0871,0,0,0-5.6181-1.3692,10.6558,10.6558,0,0,0-6.4932,2.49q-3.2461,2.49-3.2461,7.4755,0,4.235,2.1231,6.4776a15.3984,15.3984,0,0,0,4.8691,3.4883,17.1522,17.1522,0,0,0,5.6191,1.4961c1.9122.1621,3.2852.248,4.12.248a9.3432,9.3432,0,0,0,1.498-.123,8.8078,8.8078,0,0,1,1.499-.125c.1631.1621.2491.2871.2491.373,0,.082.082.2061.249.3731a38.3275,38.3275,0,0,1-12.7344,2.7421,12.7147,12.7147,0,0,1-10.6133-5.4824,19.8407,19.8407,0,0,1-4.12-12.209,55.83,55.83,0,0,1,4.62-21.5527,102.6148,102.6148,0,0,1,12.36-21.5508,150.4226,150.4226,0,0,1,38.58-36.1289,116.9428,116.9428,0,0,1,21.7256-11.0869,57.1271,57.1271,0,0,1,20.1016-4.1113q2.4932,0,2.9961.872a8.4641,8.4641,0,0,1,.5,3.6133,16.3609,16.3609,0,0,1-.375,3.1153q-.375,1.8662-.874,4.6093A139.3888,139.3888,0,0,1,366.8535,404.6377Zm-68.2949,56.6836q-2.2472-.7472-2.2481-1.9932c0-.666.5-.9961,1.4991-.9961l2.4961.9961a4.275,4.275,0,0,1,2.497,2.99A22.3469,22.3469,0,0,1,298.5586,461.3213Z" /><path d="M426.4082,397.5371a1.0225,1.0225,0,0,0-.749.249h-.249q-1.254,1.25-4.6192,4.4844-3.3735,3.2416-8.1172,7.8486-4.746,4.6143-9.9883,10.59-5.244,5.9794-9.4882,11.4609-2.751,3.7383-9.2393,6.3535-6.4965,2.6163-11.9863,4.6094c-.169.168-.293.249-.375.249-.085,0-.21.086-.374.2491a75.8391,75.8391,0,0,1,5.7421-9.4688q3.4951-4.9789,7.2422-9.9658,3.7456-4.9789,7.3672-9.4678,3.6153-4.4853,6.1172-7.9726v-.2491a5.3586,5.3586,0,0,0-1.9971-3.8623,4.9537,4.9537,0,0,0-3.9951-1.6191q-.75.747-4.62,4.7334a128.4673,128.4673,0,0,0-8.49,9.8428,133.5017,133.5017,0,0,0-10.2383,15.5722q-5.6176,9.7149-4.8692,13.4541a8.4447,8.4447,0,0,0,1.4991,3.7373,4.7,4.7,0,0,0,4.2441,2.4922,12.8621,12.8621,0,0,0,5.3682-1.4961q3.12-1.4941,5.9931-3.2392,2.8682-1.7388,7.1172-4.7334-1.0019,1.746-.999,5.98a5.8654,5.8654,0,0,0,.874,2.9912q.8716,1.4942,3.8711,1.4941a9.1582,9.1582,0,0,0,3.9951-1.1211,41.91,41.91,0,0,0,4.4952-2.6162q2.247-1.4957,4.3691-3.1152,2.1182-1.6158,3.6211-2.6153,5.7421-3.9828,9.6133-6.8525,3.8687-2.8623,3.8711-3.3633a1.57,1.57,0,0,0-.8731-1.6191c-.5859-.25-.793-.375-.625-.375q-1.002,0-7.2422,4.3613-6.2447,4.3608-18.2285,9.5928a78.89,78.89,0,0,1,8.1152-10.7139q4.8692-5.4785,10.1133-10.7139,5.2441-5.2323,10.1133-9.9658a112.9213,112.9213,0,0,0,8.3662-8.9707l.249-.249a.5057.5057,0,0,1,.125-.374.5056.5056,0,0,0,.125-.3731,5.0369,5.0369,0,0,0-1.748-3.4882h0a5.0584,5.0584,0,0,0-3.4961-1.7442Z" /><path d="M462.1152,388.8164c0-.1641-.3349-.5371-.998-1.1211-.668-.58-1.3731-1.16-2.1231-1.7441-.748-.58-1.4589-1.0782-2.122-1.4951a3.9885,3.9885,0,0,0-1.2491-.6231,9.8182,9.8182,0,0,0-1.998,2.2422q-1.497,1.998-3.2461,4.36a53.2918,53.2918,0,0,0-2.9961,4.4844,12.759,12.759,0,0,0-1.248,2.3672l2.247,1.7451a62.4434,62.4434,0,0,0,8.6153-4.1123q4.1205-2.3641,5.1181-5.8535Zm-16.73,46.5918a.2222.2222,0,0,0-.2491-.248l-.249-.25q-.5039,0-7.2422,3.4882-6.7412,3.4923-11.3613,5.6065-4.6245,2.12-6.3682,1.6191a55.4894,55.4894,0,0,1,5.1192-9.7177q3.3707-5.23,7.3662-10.5889,3.9917-5.3541,7.8662-10.2158,3.8687-4.8575,6.3672-8.3457l.249-.4991q0-1.2437-1.8721-3.3632-1.8735-2.1138-3.37-2.1172a1.021,1.021,0,0,0-.75.249h-.25q-.7485.747-4.4941,4.9824-3.7472,4.2393-8.1162,10.2149-4.3727,5.9823-8.6153,13.207a72.1365,72.1365,0,0,0-5.7431,11.4609q-1.4971,4.2393-.9981,5.7305a7.9191,7.9191,0,0,0,1.4981,3.3633q1.497,2.3715,4.9941,2.3672a15.1886,15.1886,0,0,0,7.8653-2.74q4.3651-2.7392,7.99-4.9834,3.6182-2.2427,7.1172-4.6093,3.4952-2.3658,3.7461-2.6163v-.25a.5214.5214,0,0,0-.125-.373c-.086-.082-.125-.2891-.125-.623a1,1,0,0,1-.25-.7481Z" /><path  d="M486.5869,402.0215c-.3349,0-.874.3349-1.623.9971q-1.1236.9975-2.3721,2.2421-2.2485.5025-5.1191,1.37-2.8741.8759-6.1172,1.8691a19.8132,19.8132,0,0,1,2.8711-3.3643,6.6774,6.6774,0,0,0,2.123-4.8584,12.8608,12.8608,0,0,0-.625-2.8652c-.418-1.4082-1.623-2.1172-3.6211-2.1172a9.234,9.234,0,0,0-4.1191,1.4942,34.1332,34.1332,0,0,0-5.2442,3.7373,27.3651,27.3651,0,0,0-4.4951,4.8584,8.5256,8.5256,0,0,0-1.8721,4.8593q0,3.4923,2.4961,4.4844a120.6446,120.6446,0,0,1-9.1142,9.5928q-5.1227,4.8588-9.6143,8.97-4.4942,4.11-7.6152,6.8516a20.9624,20.9624,0,0,0-3.1221,2.99c0,.833.335,1.2461.999,1.2461q.5025,0,4.6192-2.6162,4.1207-2.6162,9.7383-6.8525,5.6192-4.2335,11.7363-9.5928a96.894,96.894,0,0,0,10.8633-11.0869,11.1019,11.1019,0,0,0,4.9941-1.6192q2.9972-1.6172,4.4942-2.3672-2.2457,1.9981-5.3672,4.8575a53.499,53.499,0,0,0-5.8692,6.3545,45.92,45.92,0,0,0-4.7441,7.3505,16.898,16.898,0,0,0-1.9981,7.8477,7.1625,7.1625,0,0,0,2.4971,4.9834,60.9346,60.9346,0,0,0-11.4873,13.8291,122.4369,122.4369,0,0,0-8.3652,15.9453q-3.3691,7.8486-5.2442,13.8281-1.872,5.98-1.872,7.2266l.499.498a2.6518,2.6518,0,0,0,1.498.2481l.5-.2481a22.2683,22.2683,0,0,1,1.8731-4.2363q1.872-3.7368,4.9941-9.2187,3.12-5.483,7.3672-11.835a144.6219,144.6219,0,0,1,9.1133-12.208,93.9163,93.9163,0,0,1,10.1133-10.4658,30.92,30.92,0,0,1,10.4883-6.3526h.249a1.0148,1.0148,0,0,1,.25-.748,1.0166,1.0166,0,0,0,.25-.7481,9.3658,9.3658,0,0,0-.999-4.2343q-1-1.9923-2.2471-1.9942h-.25a12.51,12.51,0,0,0-4.7442,1.6192,40.9555,40.9555,0,0,0-7.2421,4.8593c-.835-.331-1.2491-.748-1.2491-1.246a3.4374,3.4374,0,0,1,1.2491-2.2422,55.7756,55.7756,0,0,1,5.9931-6.9766q3.4952-3.4863,7.1172-6.7266,3.6166-3.2373,6.9922-6.3535a59.1172,59.1172,0,0,0,5.6172-5.8554q0-1.2452-1.7471-3.7383-2.75-2.2413-3.4961-2.2422Z" /></svg>');
   content:"";
   position:fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background:rgba(255,255,255,0.8);
   -webkit-mask:
      var(--svg) center/200px 200px no-repeat,
      linear-gradient(#fff,#fff);
   -webkit-mask-composite:destination-out;
   mask:
      var(--svg) center/200px 200px no-repeat,
      linear-gradient(#fff,#fff);
   mask-composite:exclude;
}
0
投票

另一种方法，我发现，就是把路径组封装在一个... ... svg 标签，有自己的 viewbox 和 preserveAspectRatio 财产。

html {
    background: url(https://i.picsum.photos/id/10/800/800.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

svg {
    width: 100vw;
    height: 100vh;
}

.alpha {
    fill: #bbb;
}

.base {
    fill: white;
    mask: url(#mask);
}

.svg-container {
    width: 100%;
}

<svg viewBox="0 0 100% 100%" preserveAspectRatio="xMinYMin meet">
    <defs>
        <mask id="mask">
            <rect class="alpha" x="0" y="0" width="100%" height="100%" class="logo" />
            <svg viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet" height="100%">
                <g>
                    <path
                        d="M389.3281,361.9072a7.965,7.965,0,0,0-1.873-3.7373,9.99,9.99,0,0,0-4.12-2.74,20.6223,20.6223,0,0,0-7.1162-.9981A68.3914,68.3914,0,0,0,349.5,359.665a101.7,101.7,0,0,0-23.1,13.4541,130.8726,130.8726,0,0,0-19.3516,18.4375,225.7625,225.7625,0,0,0-15.4824,20.1817A204.9809,204.9809,0,0,0,279.58,432.17a49.0016,49.0016,0,0,0-5.4942,22.6739,35.7828,35.7828,0,0,0,1.125,8.72,23.2838,23.2838,0,0,0,3.7442,8.0986,20.967,20.967,0,0,0,6.8681,5.9785,21.2738,21.2738,0,0,0,10.4873,2.3672,25.179,25.179,0,0,0,7.9913-1.2461,55.8477,55.8477,0,0,0,7.2412-2.99,19.6477,19.6477,0,0,0,6.8672,3.8633,23.9691,23.9691,0,0,0,7.1171,1.1211,8.1121,8.1121,0,0,0,5.9922-2.2422,6.9043,6.9043,0,0,0,2.2481-4.9844q0-3.9873-1.7481-5.73-1.749-1.746-1.498-1.7441-2.001,0-1.9981,1.7441v-.249a3.6394,3.6394,0,0,0,.75,1.62,6.057,6.057,0,0,1,.1241,5.6055q-.6255,1.2437-3.37,1.2461a13.585,13.585,0,0,1-8.74-3.2383,210.2969,210.2969,0,0,0,20.2266-15.4492,164.3653,164.3653,0,0,0,17.7285-17.9385A151.53,151.53,0,0,0,370.35,417.9678a205.8819,205.8819,0,0,0,12.8613-26.4112q2.4932-5.9795,4.4942-12.457a45.4466,45.4466,0,0,0,1.998-13.4551A20.3111,20.3111,0,0,0,389.3281,361.9072Zm-22.4746,42.7305A271.85,271.85,0,0,1,349.5,430.9238a133.9406,133.9406,0,0,1-18.6035,20.0567q-10.1148,8.8417-20.1035,10.8388c-.334-.9961-.791-2.2031-1.3721-3.6123a14.5883,14.5883,0,0,0-2.4971-3.9863,15.6058,15.6058,0,0,0-3.9961-3.24,11.0871,11.0871,0,0,0-5.6181-1.3692,10.6558,10.6558,0,0,0-6.4932,2.49q-3.2461,2.49-3.2461,7.4755,0,4.235,2.1231,6.4776a15.3984,15.3984,0,0,0,4.8691,3.4883,17.1522,17.1522,0,0,0,5.6191,1.4961c1.9122.1621,3.2852.248,4.12.248a9.3432,9.3432,0,0,0,1.498-.123,8.8078,8.8078,0,0,1,1.499-.125c.1631.1621.2491.2871.2491.373,0,.082.082.2061.249.3731a38.3275,38.3275,0,0,1-12.7344,2.7421,12.7147,12.7147,0,0,1-10.6133-5.4824,19.8407,19.8407,0,0,1-4.12-12.209,55.83,55.83,0,0,1,4.62-21.5527,102.6148,102.6148,0,0,1,12.36-21.5508,150.4226,150.4226,0,0,1,38.58-36.1289,116.9428,116.9428,0,0,1,21.7256-11.0869,57.1271,57.1271,0,0,1,20.1016-4.1113q2.4932,0,2.9961.872a8.4641,8.4641,0,0,1,.5,3.6133,16.3609,16.3609,0,0,1-.375,3.1153q-.375,1.8662-.874,4.6093A139.3888,139.3888,0,0,1,366.8535,404.6377Zm-68.2949,56.6836q-2.2472-.7472-2.2481-1.9932c0-.666.5-.9961,1.4991-.9961l2.4961.9961a4.275,4.275,0,0,1,2.497,2.99A22.3469,22.3469,0,0,1,298.5586,461.3213Z" />
                    <path
                        d="M426.4082,397.5371a1.0225,1.0225,0,0,0-.749.249h-.249q-1.254,1.25-4.6192,4.4844-3.3735,3.2416-8.1172,7.8486-4.746,4.6143-9.9883,10.59-5.244,5.9794-9.4882,11.4609-2.751,3.7383-9.2393,6.3535-6.4965,2.6163-11.9863,4.6094c-.169.168-.293.249-.375.249-.085,0-.21.086-.374.2491a75.8391,75.8391,0,0,1,5.7421-9.4688q3.4951-4.9789,7.2422-9.9658,3.7456-4.9789,7.3672-9.4678,3.6153-4.4853,6.1172-7.9726v-.2491a5.3586,5.3586,0,0,0-1.9971-3.8623,4.9537,4.9537,0,0,0-3.9951-1.6191q-.75.747-4.62,4.7334a128.4673,128.4673,0,0,0-8.49,9.8428,133.5017,133.5017,0,0,0-10.2383,15.5722q-5.6176,9.7149-4.8692,13.4541a8.4447,8.4447,0,0,0,1.4991,3.7373,4.7,4.7,0,0,0,4.2441,2.4922,12.8621,12.8621,0,0,0,5.3682-1.4961q3.12-1.4941,5.9931-3.2392,2.8682-1.7388,7.1172-4.7334-1.0019,1.746-.999,5.98a5.8654,5.8654,0,0,0,.874,2.9912q.8716,1.4942,3.8711,1.4941a9.1582,9.1582,0,0,0,3.9951-1.1211,41.91,41.91,0,0,0,4.4952-2.6162q2.247-1.4957,4.3691-3.1152,2.1182-1.6158,3.6211-2.6153,5.7421-3.9828,9.6133-6.8525,3.8687-2.8623,3.8711-3.3633a1.57,1.57,0,0,0-.8731-1.6191c-.5859-.25-.793-.375-.625-.375q-1.002,0-7.2422,4.3613-6.2447,4.3608-18.2285,9.5928a78.89,78.89,0,0,1,8.1152-10.7139q4.8692-5.4785,10.1133-10.7139,5.2441-5.2323,10.1133-9.9658a112.9213,112.9213,0,0,0,8.3662-8.9707l.249-.249a.5057.5057,0,0,1,.125-.374.5056.5056,0,0,0,.125-.3731,5.0369,5.0369,0,0,0-1.748-3.4882h0a5.0584,5.0584,0,0,0-3.4961-1.7442Z" />
                    <path
                        d="M462.1152,388.8164c0-.1641-.3349-.5371-.998-1.1211-.668-.58-1.3731-1.16-2.1231-1.7441-.748-.58-1.4589-1.0782-2.122-1.4951a3.9885,3.9885,0,0,0-1.2491-.6231,9.8182,9.8182,0,0,0-1.998,2.2422q-1.497,1.998-3.2461,4.36a53.2918,53.2918,0,0,0-2.9961,4.4844,12.759,12.759,0,0,0-1.248,2.3672l2.247,1.7451a62.4434,62.4434,0,0,0,8.6153-4.1123q4.1205-2.3641,5.1181-5.8535Zm-16.73,46.5918a.2222.2222,0,0,0-.2491-.248l-.249-.25q-.5039,0-7.2422,3.4882-6.7412,3.4923-11.3613,5.6065-4.6245,2.12-6.3682,1.6191a55.4894,55.4894,0,0,1,5.1192-9.7177q3.3707-5.23,7.3662-10.5889,3.9917-5.3541,7.8662-10.2158,3.8687-4.8575,6.3672-8.3457l.249-.4991q0-1.2437-1.8721-3.3632-1.8735-2.1138-3.37-2.1172a1.021,1.021,0,0,0-.75.249h-.25q-.7485.747-4.4941,4.9824-3.7472,4.2393-8.1162,10.2149-4.3727,5.9823-8.6153,13.207a72.1365,72.1365,0,0,0-5.7431,11.4609q-1.4971,4.2393-.9981,5.7305a7.9191,7.9191,0,0,0,1.4981,3.3633q1.497,2.3715,4.9941,2.3672a15.1886,15.1886,0,0,0,7.8653-2.74q4.3651-2.7392,7.99-4.9834,3.6182-2.2427,7.1172-4.6093,3.4952-2.3658,3.7461-2.6163v-.25a.5214.5214,0,0,0-.125-.373c-.086-.082-.125-.2891-.125-.623a1,1,0,0,1-.25-.7481Z" />
                    <path
                        d="M486.5869,402.0215c-.3349,0-.874.3349-1.623.9971q-1.1236.9975-2.3721,2.2421-2.2485.5025-5.1191,1.37-2.8741.8759-6.1172,1.8691a19.8132,19.8132,0,0,1,2.8711-3.3643,6.6774,6.6774,0,0,0,2.123-4.8584,12.8608,12.8608,0,0,0-.625-2.8652c-.418-1.4082-1.623-2.1172-3.6211-2.1172a9.234,9.234,0,0,0-4.1191,1.4942,34.1332,34.1332,0,0,0-5.2442,3.7373,27.3651,27.3651,0,0,0-4.4951,4.8584,8.5256,8.5256,0,0,0-1.8721,4.8593q0,3.4923,2.4961,4.4844a120.6446,120.6446,0,0,1-9.1142,9.5928q-5.1227,4.8588-9.6143,8.97-4.4942,4.11-7.6152,6.8516a20.9624,20.9624,0,0,0-3.1221,2.99c0,.833.335,1.2461.999,1.2461q.5025,0,4.6192-2.6162,4.1207-2.6162,9.7383-6.8525,5.6192-4.2335,11.7363-9.5928a96.894,96.894,0,0,0,10.8633-11.0869,11.1019,11.1019,0,0,0,4.9941-1.6192q2.9972-1.6172,4.4942-2.3672-2.2457,1.9981-5.3672,4.8575a53.499,53.499,0,0,0-5.8692,6.3545,45.92,45.92,0,0,0-4.7441,7.3505,16.898,16.898,0,0,0-1.9981,7.8477,7.1625,7.1625,0,0,0,2.4971,4.9834,60.9346,60.9346,0,0,0-11.4873,13.8291,122.4369,122.4369,0,0,0-8.3652,15.9453q-3.3691,7.8486-5.2442,13.8281-1.872,5.98-1.872,7.2266l.499.498a2.6518,2.6518,0,0,0,1.498.2481l.5-.2481a22.2683,22.2683,0,0,1,1.8731-4.2363q1.872-3.7368,4.9941-9.2187,3.12-5.483,7.3672-11.835a144.6219,144.6219,0,0,1,9.1133-12.208,93.9163,93.9163,0,0,1,10.1133-10.4658,30.92,30.92,0,0,1,10.4883-6.3526h.249a1.0148,1.0148,0,0,1,.25-.748,1.0166,1.0166,0,0,0,.25-.7481,9.3658,9.3658,0,0,0-.999-4.2343q-1-1.9923-2.2471-1.9942h-.25a12.51,12.51,0,0,0-4.7442,1.6192,40.9555,40.9555,0,0,0-7.2421,4.8593c-.835-.331-1.2491-.748-1.2491-1.246a3.4374,3.4374,0,0,1,1.2491-2.2422,55.7756,55.7756,0,0,1,5.9931-6.9766q3.4952-3.4863,7.1172-6.7266,3.6166-3.2373,6.9922-6.3535a59.1172,59.1172,0,0,0,5.6172-5.8554q0-1.2452-1.7471-3.7383-2.75-2.2413-3.4961-2.2422Z" />
                </g>
            </svg>
        </mask>
    </defs>
    <rect class="base" x="0" y="0" width="100%" height="100%" />
</svg>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.