问题
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.
Here is a codepen demo. You're going to have to navigate to the clickable regions, which are in the bottom right hand corner and the top middle of the map.
I know this can be done by duplicating the SVG at a layer below the initial, clipped SVG, but this is obviously redundant.
Does anybody know a simpler way to do this?
回答1:
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>
And instead of blacking out the background with div, animate the svg cover inside the mask instead.
Here's a codepen demo
来源：https://stackoverflow.com/questions/54101984/separate-clipped-area-from-non-clipped-area