将剪切区域与非剪切区域分开 [英] Separate Clipped Area from Non-Clipped Area
本文介绍了将剪切区域与非剪切区域分开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个嵌入在 SVG 中的大量地图图像.SVG 是交互式的，如果用户点击任一路径，这两个路径都在地图上勾勒出子区域的轮廓，就会触发事件.
I have a massive image of a map embedded in an SVG. The SVG is interactive, whereby if the user clicks either path, both of which outline sub-regions on the map, events are triggered.
<svg id='map' width='7192' height='3912' viewBox='0 0 7192 3912' version='1.1'>
<clipPath id="clip1">
<path id='path1'
d='m 3784.1181,1050.027 40.1492,-8.7683 24.6894,14.9983 47.0714,-11.9986 0.2307,-6.6916 10.1527,-2.3073 c -5.5769,-11.917 -6.6458,-22.0783 -7.8453,-35.0728 l 2.7689,-1.3845 -0.2307,-4.8456 5.5378,-1.8459 0.2307,-11.5372 -5.7685,-3.4611 c -0.3828,-12.73485 5.1909,-25.87526 8.4302,-38.00476 l 6.4526,-3.06728 7.3838,-10.49883 3.8073,-1.7305 3.9225,-11.53713 -71.7608,-45.4562 -15.2289,4.8456 -11.7678,-4.1534 -62.5312,20.7668 4.3841,14.9982 10.3834,7.8453 -37.611,12.9215 4.8456,10.3834 14.306,8.7683 c 3.5076,10.9723 5.4081,21.9458 4.6149,32.3038 l -6.23,0.923 -10e-5,12.4601 8.3068,3.9226 -6.4608,45.6869 z' />
</clipPath>
<clipPath id="clip2">
<path id='path2'
d='m 5840.0058,2584.4427 -17.5115,-14.8916 13.3366,-33.6373 33.3009,37.8678 z m 16.1189,14.3621 7.0293,-11.0368 -13.8124,4.7572 z m 21.129,-37.7906 -34.922,-40.8194 12.0101,-28.1664 38.2975,33.0104 z m 33.4112,-35.6044 10.3982,8.0618 -17.2279,5.0948 z m -546.7346,363.4283 34.1099,16.6176 18.3669,-57.5226 17.4922,-2.6911 5.9204,3.2294 v 11.5718 l -4.3058,14.2629 11.6255,-2.0633 15.896,0.1903 0.9678,-5.1283 h 6.0893 l 6.4699,-26.2601 18.6484,-2.6641 8.9437,8.9437 0.2364,14.3179 9.4223,9.0417 -7.8999,30.4954 32.9856,36.7965 1.6093,7.2896 -4.9557,6.4332 -10.2757,1.6175 2.3296,9.134 52.1122,-27.4544 c -7.6761,-4.9805 -12.7768,-12.5363 -23.1674,-14.8024 l 18.1412,-2.0196 1.1991,-3.7009 -5.7979,-5.3156 -0.7123,-5.1471 3.3243,-5.6853 0.2295,-4.6087 -3.7279,-3.9295 -1.1715,-5.8132 15.2444,1.7218 7.0364,-1.2384 1.9075,-1.0513 14.5439,-0.5929 2.2933,-1.9111 8.2782,-0.552 5.0488,2.1393 22.8983,18.0556 167.9976,129.2456 -5.4757,2.7196 -0.2165,2.3587 2.0802,1.2746 -2.4868,2.7016 -2.6738,-0.1746 -4.4815,4.2022 -6.5749,-0.6501 0.1512,3.2979 -6.6991,1.49 -1.276,2.3465 5.0767,3.7719 -6.0553,1.3932 6.8846,2.8204 7.8428,2.814 -1.2911,1.5769 2.6099,1.6722 4.4453,1.0751 -0.4066,4.7856 -5.4498,2.2168 -9.9216,-2.7308 -3.2615,0.409 -1.4536,-2.5406 -5.7353,-1.6841 0.5323,5.4104 3.5772,1.1288 -0.5143,1.224 -2.988,0.8433 -0.3375,5.6064 -3.5833,3.4228 -9.2576,5.4064 -3.5391,-0.3794 -0.4988,-2.1907 -1.7346,-9.4843 -14.9562,-11.8992 -27.9797,14.7414 -7.9755,-5.1267 -58.8948,28.2431 85.6312,68.2226 c 0.8169,-1.1317 0.7965,-2.5209 4.076,-3.2401 -1.8277,-4.5588 -1.7198,-9.4413 0.2342,-13.4965 l -1.7855,-9.3604 -2.9344,-0.04 -0.2296,-3.9756 -1.9644,-0.02 -0.6094,4.1239 -8.9875,-0.194 -0.3673,-2.1687 -6.7057,-1.9484 -0.3049,-9.9802 -2.1914,-2.3233 c 1.7859,-4.1605 2.8444,-7.9497 8.4509,-10.2635 0.3248,-2.9713 2.8172,-4.1754 5.694,-4.9363 1.1136,-3.4403 3.5156,-6.4512 9.0057,-8.4327 l 13.1714,-0.149 4.9044,3.3463 3.7948,6.2871 c 2.9436,1.1906 6.1706,1.8751 7.1238,6.6199 l 0.1568,4.3107 1.3731,0.505 -0.039,6.1964 -1.1378,0.1938 -0.1963,3.4082 c -2.476,-1.2283 -3.6022,-3.266 -4.7732,-5.2972 l 0.035,2.5605 -1.2058,1.3074 0.2092,4.4422 -1.0115,1.0022 -3.173,0.1673 c -1.1729,1.2676 -2.2643,1.173 -3.6999,1.277 l 0.1093,-3.4587 -1.234,-0.084 c -1.9759,4.5054 -4.3348,7.8218 -9.5778,8.3204 l 0.6814,6.2638 6.0395,-2.8006 c 3.444,-1.289 10.3835,3.5751 11.5584,10.8887 l -0.01,4.9196 -3.7758,-1.2006 c -0.32,2.4063 0.529,6.4251 -2.5987,4.9588 -0.694,4.0262 -4.1345,1.9493 -6.5219,2.2125 1.9859,1.6393 1.8777,5.959 -2.3528,7.4907 l 30.5751,24.0677 24.4214,-11.9307 6.1535,3.6731 18.0201,-9.2181 10.5082,-0.5593 9.701,-5.1342 12.392,-5.6724 -0.2562,-5.9415 82.9667,-43.3863 2.9572,3.0209 -1.1467,1.8772 82.5439,62.6224 72.6182,-0.5876 6.538,10.0534 7.1089,-11.2591 10.7244,11.7661 6.4917,-9.927 16.7675,1.1982 8.7236,-3.8282 40.1921,12.9013 47.7533,-19.7782 47.0081,1.3049 7.4264,-7.0757 10.2522,-3.5773 15.2306,5.0343 12.0014,-0.6171 24.2199,-20.1296 -4.409,-4.1313 -4.8158,-0.929 4.4338,-5.5401 9.1495,-1.0029 30.2718,0.7442 10.1385,-11.2278 -7.4796,-7.0394 10.8036,-12.5154 16.5295,9.1505 17.0488,-3.2534 13.4334,-12.5775 -6.3568,-9.7233 8.0132,-4.0823 0.01,-5.3606 7.6095,-4.6205 24.4961,-2.8041 -7.0642,-13.1865 5.8532,-3.3638 -6.3914,-2.8256 1.5894,-12.1269 17.7362,1.7324 0.9167,-1.3623 -11.3279,-4.5918 2.2621,-1.766 12.7765,2.2496 0.7369,-1.2972 -6.5292,-2.6427 6.0488,-2.8637 -2.7263,-2.0614 -10.127,-1.3886 4.6743,-2.7343 -2.7263,-2.0614 18.0053,-57.8757 -6.8548,-4.9079 19.0517,-8.9367 0.9608,-9.7767 -5.319,-4.4484 -92.8244,-63.7603 7.9864,-6.9181 -5.6038,-4.227 54.5426,-26.2941 -2.4437,-3.3443 12.3574,-10.2065 1.4583,2.8454 18.4624,-5.2764 6.7511,4.3783 23.4831,-11.8963 4.9245,2.9023 19.7155,-10.8448 -98.3857,-68.5884 21.4502,-12.9634 -1.9511,-7.6024 -7.0642,-6.1223 -7.5236,-4.7931 -24.2737,12.0821 -9.1472,-4.1647 -50.4779,24.5054 7.7986,5.4763 -2.8577,1.8608 -18.4139,-1.945 -32.7436,-22.3459 -9.5534,0.3028 3.633,2.3212 -1.5474,3.1956 0.2691,2.6575 -13.0519,9.6207 -45.8019,-31.6552 12.5829,-34.1771 8.704,-5.4448 0.492,-3.3244 -24.7093,-15.0703 -28.6223,12.742 -4.6524,-1.6161 -17.026,-31.3189 48.3391,-21.8317 3.3975,-3.3975 13.2202,-6.2232 11.0671,-4.6085 -31.7742,-19.0483 -27.9685,12.6684 -63.5103,-42.4638 4.8041,-2.4952 -29.9178,-18.7992 -139.4995,63.3085 -2.535,-0.3878 -1.116,1.6326 3.8712,4.2358 c 1.0492,5.0693 0.2257,8.9535 -2.1765,13.8876 l 4.682,3.7475 0.1905,2.3596 -1.1164,0.2903 0.1881,0.6218 -0.1121,2.225 12.6997,17.1793 c 0.2474,0.6719 0.3991,1.3628 0.2014,2.1237 l -1.2611,2.2828 0.5555,1.1055 0.8245,-0.3747 0.5892,0.6682 -0.5105,10.3061 -3.0458,7.2751 -28.9503,9.3913 -7.4877,0.021 -3.5446,-2.4808 c 0,0 -2.1375,2.1116 -5.1342,1.4365 -2.9966,-0.6751 -8.031,-5.1318 -9.3186,-8.7746 -1.2876,-3.6429 -0.2979,-6.6799 -0.1734,-9.9104 l -2.6186,-10.2502 -15.7886,-15.4288 -11.11,3.1461 -2.1918,-1.9716 c -2.0617,1.5734 -4.9754,2.0778 -7.0358,0.9884 -2.589,-1.369 -5.1083,-3.958 -6.4187,-6.7811 -0.9372,-2.0189 -1.9096,-3.5226 -0.111,-8.2307 l -1.4937,-1.4903 c -1.8195,1.4447 -6.1467,2.1123 -8.9151,0.9834 -3.4102,-1.3906 -5.7136,-5.0956 -7.0035,-8.5451 -1.2113,-3.2394 -0.4948,-6.6447 -0.3017,-10.3709 l -1.0384,-0.4995 -2.605,2.2318 -2.2638,-2.4262 4.9379,-5.3508 2.3815,-2.3906 1.9583,-0.8246 -7.0689,-7.3848 -4.5048,-2.8342 -2.8595,-2.5583 -1.6363,-10.0383 -1.6904,-2.8049 -6.669,12.9383 1.2288,1.9471 -19.6044,34.0273 1.8675,2.358 -4.0584,7.5992 43.9722,32.8487 -102.9471,46.4309 -0.2855,4.4719 48.5305,36.3836 4.6797,-0.1182 7.1489,8.0168 51.4502,37.4209 -142.284,67.2017 -93.3029,-69.8901 -10.7117,3.2628 -7.74,-6.6716 v -4.8497 l -5.8547,-2.6293 -2.7199,2.3757 -5.3281,-3.6155 0.7592,-3.7827 -18.0892,-16.2556 -17.6835,-5.0801 -35.7073,-27.0164 -74.0844,-56.1334 -0.1735,-3.5192 -13.7793,-8.3715 2.91,-9.5241 -37.4872,-26.7358 -22.4675,14.6608 13.8766,11.3815 -50.1037,36.254 -4.5879,-4.338 -2.3809,18.0893 -6.3771,8.3844 147.3955,115.1828 -91.5463,40.8248 v -4.4745 l -5.9204,-3.2294 -17.4922,2.6911 -5.0873,16.0659 z' />
</clipPath>
<use xlink:href="#path1" />
<use xlink:href="#path2" />
<image width='7192' height='3912' x='0' y='0' preserveAspectRatio='none'
xlink:href='map.jpg' />
<path id='gallery' class='zones' data-zone='Fan Art Gallery'
d='m 3784.1181,1050.027 40.1492,-8.7683 24.6894,14.9983 47.0714,-11.9986 0.2307,-6.6916 10.1527,-2.3073 c -5.5769,-11.917 -6.6458,-22.0783 -7.8453,-35.0728 l 2.7689,-1.3845 -0.2307,-4.8456 5.5378,-1.8459 0.2307,-11.5372 -5.7685,-3.4611 c -0.3828,-12.73485 5.1909,-25.87526 8.4302,-38.00476 l 6.4526,-3.06728 7.3838,-10.49883 3.8073,-1.7305 3.9225,-11.53713 -71.7608,-45.4562 -15.2289,4.8456 -11.7678,-4.1534 -62.5312,20.7668 4.3841,14.9982 10.3834,7.8453 -37.611,12.9215 4.8456,10.3834 14.306,8.7683 c 3.5076,10.9723 5.4081,21.9458 4.6149,32.3038 l -6.23,0.923 -10e-5,12.4601 8.3068,3.9226 -6.4608,45.6869 z' />
<path id='studio' class='zones' data-zone='The Lost Realm of Mordor'
d='m 5840.0058,2584.4427 -17.5115,-14.8916 13.3366,-33.6373 33.3009,37.8678 z m 16.1189,14.3621 7.0293,-11.0368 -13.8124,4.7572 z m 21.129,-37.7906 -34.922,-40.8194 12.0101,-28.1664 38.2975,33.0104 z m 33.4112,-35.6044 10.3982,8.0618 -17.2279,5.0948 z m -546.7346,363.4283 34.1099,16.6176 18.3669,-57.5226 17.4922,-2.6911 5.9204,3.2294 v 11.5718 l -4.3058,14.2629 11.6255,-2.0633 15.896,0.1903 0.9678,-5.1283 h 6.0893 l 6.4699,-26.2601 18.6484,-2.6641 8.9437,8.9437 0.2364,14.3179 9.4223,9.0417 -7.8999,30.4954 32.9856,36.7965 1.6093,7.2896 -4.9557,6.4332 -10.2757,1.6175 2.3296,9.134 52.1122,-27.4544 c -7.6761,-4.9805 -12.7768,-12.5363 -23.1674,-14.8024 l 18.1412,-2.0196 1.1991,-3.7009 -5.7979,-5.3156 -0.7123,-5.1471 3.3243,-5.6853 0.2295,-4.6087 -3.7279,-3.9295 -1.1715,-5.8132 15.2444,1.7218 7.0364,-1.2384 1.9075,-1.0513 14.5439,-0.5929 2.2933,-1.9111 8.2782,-0.552 5.0488,2.1393 22.8983,18.0556 167.9976,129.2456 -5.4757,2.7196 -0.2165,2.3587 2.0802,1.2746 -2.4868,2.7016 -2.6738,-0.1746 -4.4815,4.2022 -6.5749,-0.6501 0.1512,3.2979 -6.6991,1.49 -1.276,2.3465 5.0767,3.7719 -6.0553,1.3932 6.8846,2.8204 7.8428,2.814 -1.2911,1.5769 2.6099,1.6722 4.4453,1.0751 -0.4066,4.7856 -5.4498,2.2168 -9.9216,-2.7308 -3.2615,0.409 -1.4536,-2.5406 -5.7353,-1.6841 0.5323,5.4104 3.5772,1.1288 -0.5143,1.224 -2.988,0.8433 -0.3375,5.6064 -3.5833,3.4228 -9.2576,5.4064 -3.5391,-0.3794 -0.4988,-2.1907 -1.7346,-9.4843 -14.9562,-11.8992 -27.9797,14.7414 -7.9755,-5.1267 -58.8948,28.2431 85.6312,68.2226 c 0.8169,-1.1317 0.7965,-2.5209 4.076,-3.2401 -1.8277,-4.5588 -1.7198,-9.4413 0.2342,-13.4965 l -1.7855,-9.3604 -2.9344,-0.04 -0.2296,-3.9756 -1.9644,-0.02 -0.6094,4.1239 -8.9875,-0.194 -0.3673,-2.1687 -6.7057,-1.9484 -0.3049,-9.9802 -2.1914,-2.3233 c 1.7859,-4.1605 2.8444,-7.9497 8.4509,-10.2635 0.3248,-2.9713 2.8172,-4.1754 5.694,-4.9363 1.1136,-3.4403 3.5156,-6.4512 9.0057,-8.4327 l 13.1714,-0.149 4.9044,3.3463 3.7948,6.2871 c 2.9436,1.1906 6.1706,1.8751 7.1238,6.6199 l 0.1568,4.3107 1.3731,0.505 -0.039,6.1964 -1.1378,0.1938 -0.1963,3.4082 c -2.476,-1.2283 -3.6022,-3.266 -4.7732,-5.2972 l 0.035,2.5605 -1.2058,1.3074 0.2092,4.4422 -1.0115,1.0022 -3.173,0.1673 c -1.1729,1.2676 -2.2643,1.173 -3.6999,1.277 l 0.1093,-3.4587 -1.234,-0.084 c -1.9759,4.5054 -4.3348,7.8218 -9.5778,8.3204 l 0.6814,6.2638 6.0395,-2.8006 c 3.444,-1.289 10.3835,3.5751 11.5584,10.8887 l -0.01,4.9196 -3.7758,-1.2006 c -0.32,2.4063 0.529,6.4251 -2.5987,4.9588 -0.694,4.0262 -4.1345,1.9493 -6.5219,2.2125 1.9859,1.6393 1.8777,5.959 -2.3528,7.4907 l 30.5751,24.0677 24.4214,-11.9307 6.1535,3.6731 18.0201,-9.2181 10.5082,-0.5593 9.701,-5.1342 12.392,-5.6724 -0.2562,-5.9415 82.9667,-43.3863 2.9572,3.0209 -1.1467,1.8772 82.5439,62.6224 72.6182,-0.5876 6.538,10.0534 7.1089,-11.2591 10.7244,11.7661 6.4917,-9.927 16.7675,1.1982 8.7236,-3.8282 40.1921,12.9013 47.7533,-19.7782 47.0081,1.3049 7.4264,-7.0757 10.2522,-3.5773 15.2306,5.0343 12.0014,-0.6171 24.2199,-20.1296 -4.409,-4.1313 -4.8158,-0.929 4.4338,-5.5401 9.1495,-1.0029 30.2718,0.7442 10.1385,-11.2278 -7.4796,-7.0394 10.8036,-12.5154 16.5295,9.1505 17.0488,-3.2534 13.4334,-12.5775 -6.3568,-9.7233 8.0132,-4.0823 0.01,-5.3606 7.6095,-4.6205 24.4961,-2.8041 -7.0642,-13.1865 5.8532,-3.3638 -6.3914,-2.8256 1.5894,-12.1269 17.7362,1.7324 0.9167,-1.3623 -11.3279,-4.5918 2.2621,-1.766 12.7765,2.2496 0.7369,-1.2972 -6.5292,-2.6427 6.0488,-2.8637 -2.7263,-2.0614 -10.127,-1.3886 4.6743,-2.7343 -2.7263,-2.0614 18.0053,-57.8757 -6.8548,-4.9079 19.0517,-8.9367 0.9608,-9.7767 -5.319,-4.4484 -92.8244,-63.7603 7.9864,-6.9181 -5.6038,-4.227 54.5426,-26.2941 -2.4437,-3.3443 12.3574,-10.2065 1.4583,2.8454 18.4624,-5.2764 6.7511,4.3783 23.4831,-11.8963 4.9245,2.9023 19.7155,-10.8448 -98.3857,-68.5884 21.4502,-12.9634 -1.9511,-7.6024 -7.0642,-6.1223 -7.5236,-4.7931 -24.2737,12.0821 -9.1472,-4.1647 -50.4779,24.5054 7.7986,5.4763 -2.8577,1.8608 -18.4139,-1.945 -32.7436,-22.3459 -9.5534,0.3028 3.633,2.3212 -1.5474,3.1956 0.2691,2.6575 -13.0519,9.6207 -45.8019,-31.6552 12.5829,-34.1771 8.704,-5.4448 0.492,-3.3244 -24.7093,-15.0703 -28.6223,12.742 -4.6524,-1.6161 -17.026,-31.3189 48.3391,-21.8317 3.3975,-3.3975 13.2202,-6.2232 11.0671,-4.6085 -31.7742,-19.0483 -27.9685,12.6684 -63.5103,-42.4638 4.8041,-2.4952 -29.9178,-18.7992 -139.4995,63.3085 -2.535,-0.3878 -1.116,1.6326 3.8712,4.2358 c 1.0492,5.0693 0.2257,8.9535 -2.1765,13.8876 l 4.682,3.7475 0.1905,2.3596 -1.1164,0.2903 0.1881,0.6218 -0.1121,2.225 12.6997,17.1793 c 0.2474,0.6719 0.3991,1.3628 0.2014,2.1237 l -1.2611,2.2828 0.5555,1.1055 0.8245,-0.3747 0.5892,0.6682 -0.5105,10.3061 -3.0458,7.2751 -28.9503,9.3913 -7.4877,0.021 -3.5446,-2.4808 c 0,0 -2.1375,2.1116 -5.1342,1.4365 -2.9966,-0.6751 -8.031,-5.1318 -9.3186,-8.7746 -1.2876,-3.6429 -0.2979,-6.6799 -0.1734,-9.9104 l -2.6186,-10.2502 -15.7886,-15.4288 -11.11,3.1461 -2.1918,-1.9716 c -2.0617,1.5734 -4.9754,2.0778 -7.0358,0.9884 -2.589,-1.369 -5.1083,-3.958 -6.4187,-6.7811 -0.9372,-2.0189 -1.9096,-3.5226 -0.111,-8.2307 l -1.4937,-1.4903 c -1.8195,1.4447 -6.1467,2.1123 -8.9151,0.9834 -3.4102,-1.3906 -5.7136,-5.0956 -7.0035,-8.5451 -1.2113,-3.2394 -0.4948,-6.6447 -0.3017,-10.3709 l -1.0384,-0.4995 -2.605,2.2318 -2.2638,-2.4262 4.9379,-5.3508 2.3815,-2.3906 1.9583,-0.8246 -7.0689,-7.3848 -4.5048,-2.8342 -2.8595,-2.5583 -1.6363,-10.0383 -1.6904,-2.8049 -6.669,12.9383 1.2288,1.9471 -19.6044,34.0273 1.8675,2.358 -4.0584,7.5992 43.9722,32.8487 -102.9471,46.4309 -0.2855,4.4719 48.5305,36.3836 4.6797,-0.1182 7.1489,8.0168 51.4502,37.4209 -142.284,67.2017 -93.3029,-69.8901 -10.7117,3.2628 -7.74,-6.6716 v -4.8497 l -5.8547,-2.6293 -2.7199,2.3757 -5.3281,-3.6155 0.7592,-3.7827 -18.0892,-16.2556 -17.6835,-5.0801 -35.7073,-27.0164 -74.0844,-56.1334 -0.1735,-3.5192 -13.7793,-8.3715 2.91,-9.5241 -37.4872,-26.7358 -22.4675,14.6608 13.8766,11.3815 -50.1037,36.254 -4.5879,-4.338 -2.3809,18.0893 -6.3771,8.3844 147.3955,115.1828 -91.5463,40.8248 v -4.4745 l -5.9204,-3.2294 -17.4922,2.6911 -5.0873,16.0659 z' />
</svg>
与其剪裁和隐藏路径外的所有内容，我希望剪掉的所有内容仅在紫色幕布"向中心生长之前保持可见，逐渐显露图像中未被路径剪裁的部分.换句话说，在下面的演示中单击路径触发动画后，动画期间屏幕上的红色部分应该仍然是地图.
Instead of clipping and hiding everything outside of the path, I would like everything that is clipped to remain visible only until the purple "curtain" grows towards the center, gradually revealing the part of the image that is not clipped by the path. In other words, after you click a path to trigger the animation in the demo below, the part of the screen that is red during the animation should still be the map.
这是一个 codepen 演示.您将不得不导航到可点击区域，这些区域位于地图的右下角和顶部中间.
我知道这可以通过在初始剪切 SVG 下方的层复制 SVG 来完成，但这显然是多余的.
I know this can be done by duplicating the SVG at a layer below the initial, clipped SVG, but this is obviously redundant.
有人知道更简单的方法吗?
推荐答案
如何使用分层蒙版?在蒙版中，任何颜色为黑色的都将被隐藏，任何颜色为白色的都将显示出来.这个想法是为蒙版内的 svg 形状设置动画.例如，可以像这样设置掩码:
How about using layered mask? In a mask, anything colored black will be hidden, anything colored white will be shown. The idea is to animate the svg shapes inside the mask. So for example a mask can be set up like this:
<svg viewBox="0 0 300 300" >
<mask id="mask">
<!-- hide everything, black -->
<rect x="0" y="0" width="300" height="300" fill="black" />
<!-- the clip shape, white -->
<path fill="white" d="..." />
<!-- your blackout cover, white -->
<rect id="cover" x="0" y="0" width="300" height="300" fill="white" />
</mask>
<!-- your image -->
<image mask="url(#mask)" xlink:href="...">
</svg>
而不是用 div 将背景涂黑，而是为蒙版内的 svg 封面设置动画.
And instead of blacking out the background with div, animate the svg cover inside the mask instead.
这篇关于将剪切区域与非剪切区域分开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
