我有一张嵌在 SVG 中的大量 map 图像。 SVG 是交互式的，如果用户单击任一路径(这两个路径都勾勒出 map 上的子区域)，就会触发事件。
<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>
我不想剪裁和隐藏路径外的所有东西，我希望剪裁的所有东西都保持可见只有紫色“幕布”向中心生长，逐渐显露未被路径剪裁的图像部分。换句话说，在下面的演示中点击路径触发动画后，动画期间屏幕上红色的部分应该仍然是 map 。
这是一个 codepen demo 。 您将必须导航到位于 map 右下角和顶部中间的可点击区域。
我知道这可以通过在初始裁剪 SVG 下面的一层复制 SVG 来完成，但这显然是多余的。
有人知道更简单的方法吗？
最佳答案
使用分层蒙版怎么样？在面具中，任何黑色的东西都会被隐藏，任何白色的东西都会显示出来。这个想法是为蒙版内的 svg 形状设置动画。因此，例如可以像这样设置掩码:
<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 封面设置动画。
关于javascript - 将裁剪区域与非裁剪区域分开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54101984/