below是我想要的无缝交织结构。
document.addEventListener("DOMContentLoaded", () => {
function resetAnimation(element, duration) {
element.style.transform = "translateX(0px)";
setTimeout(() => {
element.style.transition = `transform ${duration}s linear`;
element.style.transform = "translateX(100%)";
}, 10);
}
const ucuncuDalga = document.querySelector(".ucuncu-dalga");
const ikinciDalga = document.querySelector(".ikinci-dalga");
const ilkDalga = document.querySelector(".ilk-dalga");
resetAnimation(ucuncuDalga, 35);
resetAnimation(ikinciDalga, 45);
resetAnimation(ilkDalga, 60);
setInterval(() => {
ucuncuDalga.style.transition = "none";
ikinciDalga.style.transition = "none";
ilkDalga.style.transition = "none";
resetAnimation(ucuncuDalga, 35);
resetAnimation(ikinciDalga, 45);
resetAnimation(ilkDalga, 60);
}, 6000);
});
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="350px">
<g id="container">
<path d="M 38.279 50.848 C 38.621 48.493 34 50.667 30 52 C 30 62 26 54 23.6 62 L 25 63.2 L 23.6 64.5 C 25 68 17 70 19.02 71 C 17.413 73 17.057 74.667 17.95 76 C 13.317 78.667 12.973 81.65 16.92 84.95 C 20 88.88 15.12 90 19.11 96 C 13 100 22 104 12 107 C 16 108.333 17 111 15 115 L 18 120 C 29 122 18 121 30 130 C 29 142 40 135 43 145 C 50 145 50 156 59 147.9 C 65 143 70 152 85 146.6 L 88.4 145.5 C 96.133 142.5 101.3 141.655 103.9 142.964 L 106.985 150 L 112 152 L 112 150 L 120 151 C 136.2 152 115 172 122 165 C 124 166.333 123 167.667 119 169 C 121.6 175.667 125.46 180.267 130.58 182.8 C 131.527 184.267 132.667 186.667 134 190 C 130.9 189.5 139.84 202.9 138 202.6 L 136 203 C 141.333 213 141 219 135 221 C 132.467 226.867 131.467 231.2 132 234 C 133.2 230 132.943 232 131.23 240 C 137.54 240 135 249 142 258 C 146 254.21 141 280 150 283 C 158 285 147 289.5 160.23 297.54 C 158.743 299.18 157.217 300.02 155.65 300.06 C 158.55 302.687 159.333 304.767 158 306.3 L 161 306.1 C 162.933 308.633 165.433 308.933 168.5 307 C 178 308.45 175 305 181 307 L 184 306.4 C 186.9 310.29 192 300 196 306.1 C 192.8 304.5 210 299 211.6 288.85 C 219.9 275 216.52 299.1 221.3 271.512 C 209.96 271 239 268 229.8 255.54 C 229.267 251.18 228.167 249.333 226.5 250 L 226.856 248 C 255 218.9 240 250 252 228 C 252.667 226 251.933 224 249.8 222 C 251.6 221.333 251.667 219.933 250 217.8 L 251 210 C 248.2 209.333 246.533 208 246 206 C 249.5 200 240.65 190.8 246.5 196.45 C 238 188 248.6 191 249 178.56 C 251.667 176.187 253.983 174.56 255.95 173.68 C 252.26 170.551 278.546 159 285.65 140 C 291.251 134.223 294.509 128.297 295.423 122.221 C 288.023 120.541 296.856 115.205 291.306 119.111 L 280.088 120.56 C 278.366 120.12 276.697 120.373 275.08 121.32 C 271.693 120.84 268.687 121.467 266.06 123.2 C 264.02 119.067 262.167 117.95 260.5 119.85 L 263 117.3 L 255.96 110.85 C 252.76 106.617 250.307 105.327 248.6 106.98 L 250 104 C 243.307 101.333 242.305 100.5 246.995 101.5 C 244.908 93.893 242.163 89.792 238.76 89.195 C 240 80.8 232 79 230.698 68.963 C 223.84 56 213.085 49.98 219 46 C 219.64 51.333 221.19 53.333 223.649 52 L 225.54 55 L 227.55 50 C 225.183 48.667 225.333 47.333 228 46 C 226 45.333 225.65 42.267 226.95 36.8 C 223.58 40.2 218.82 40.599 212.67 37.996 C 206.96 38.95 201.049 42.84 195.968 37.395 L 188.954 37.9 C 160.8 25.333 173 38 165.849 33.695 C 168.205 55.579 156.85 33.8 148.68 38.485 C 149.56 33.895 147.413 32.513 142.24 34.34 C 139.248 31.48 136.824 30.817 134.967 32.35 C 133 36.95 130.308 26.964 126.968 29.026 C 136.95 13.673 124.221 23.95 132.024 16.267 C 128.777 12.009 126.677 19.96 123.965 14.636 C 118.653 21.162 114.085 12.121 111.952 16.007 C 106.08 18.994 102.958 16.754 101.05 16.496 C 97 18 91 16 77 23 L 72.656 22 L 71.23 24 L 70.008 22 C 63.8 30 66.96 10 57.6 28.217 L 51 31.32 C 48.333 31.773 47.333 33.317 48 35.95 L 45.94 36 C 43.98 37.967 43.99 41.267 45.969 45.9 C 42 48.22 39.507 51.3 39.507 51.3 L 38.279 50.848 Z" style="fill: beige; " stroke="#000"/>
<g clip-path="url(#__lottie_element_2)"><g transform="matrix(1,0,0,1,-129.93846130371094,-376.5076904296875)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(107,211,234)" fill-opacity="1" d=" M592.0029907226562,412.1919860839844 C583.9000244140625,413.0010070800781 576.114013671875,409.781005859375 574.1320190429688,399.2179870605469 C570.2789916992188,407.3059997558594 560.093017578125,411.7439880371094 549.583984375,412.6029968261719 C548.3800048828125,412.7030029296875 547.1699829101562,412.7539978027344 545.9660034179688,412.75799560546875 C543.7210083007812,412.76800537109375 541.4920043945312,412.6130065917969 539.3380126953125,412.2980041503906 C539.3380126953125,412.2980041503906 539.3380126953125,412.2980041503906 539.3380126953125,412.2959899902344 C538.510986328125,412.1780090332031 537.6959838867188,412.0320129394531 536.89599609375,411.8599853515625 C529.2230224609375,410.24200439453125 522.8779907226562,406.4309997558594 520.7860107421875,400.4670104980469 C514.3179931640625,412.12298583984375 479.4440002441406,418.3710021972656 472.7539978027344,402.5639953613281 C468.89898681640625,412.14801025390625 460.27301025390625,412.7909851074219 451.7770080566406,410.4779968261719 C451.7770080566406,410.4779968261719 451.7749938964844,410.4779968261719 451.7749938964844,410.4779968261719 C450.8739929199219,410.2330017089844 449.9750061035156,409.95599365234375 449.0840148925781,409.64898681640625 C439.14300537109375,406.2550048828125 430.1199951171875,399.6189880371094 430.1199951171875,399.6189880371094 C430.1199951171875,399.6189880371094 413.27899169921875,414.1629943847656 397.25299072265625,411.8039855957031 C395.5350036621094,411.5530090332031 393.82598876953125,411.10400390625 392.14801025390625,410.42401123046875 C391.7229919433594,410.25201416015625 391.3009948730469,410.06500244140625 390.8800048828125,409.8599853515625 C390.0950012207031,409.48199462890625 389.3169860839844,409.052001953125 388.5509948730469,408.55999755859375 C385.04998779296875,406.3179931640625 381.7699890136719,402.8550109863281 378.92498779296875,397.7850036621094 C361.9280090332031,430.4739990234375 321.06201171875,401.7510070800781 321.06201171875,401.7510070800781 C321.06201171875,401.7510070800781 290.2539978027344,428.1919860839844 273.7179870605469,403.1719970703125 C266.2879943847656,414.4570007324219 237.57200622558594,419.7489929199219 225.69700622558594,402.8609924316406 C195.74000549316406,426.95098876953125 163.447998046875,396.572998046875 163.447998046875,396.572998046875 C163.447998046875,396.572998046875 149.95700073242188,412.25 130.43800354003906,411.1400146484375 C111.80599975585938,410.0799865722656 103.8270034790039,402.260009765625 103.8270034790039,402.260009765625 C103.8270034790039,402.260009765625 75.77400207519531,428.7980041503906 53.005001068115234,400.114990234375 C52.06399917602539,398.92999267578125 51.361000061035156,406.0039978027344 39.75899887084961,409.5350036621094 C39.75899887084961,409.5350036621094 39.75699996948242,409.5350036621094 39.75699996948242,409.5350036621094 C39.67300033569336,409.56201171875 39.58599853515625,409.58599853515625 39.500999450683594,409.6130065917969 C39.500999450683594,409.6130065917969 39.499000549316406,409.6130065917969 39.499000549316406,409.6130065917969 C34.944000244140625,410.9590148925781 28.7450008392334,411.760009765625 20.253000259399414,411.3330078125 C0.17100000381469727,410.322998046875 -3.122999906539917,398.59600830078125 -3.122999906539917,398.59600830078125 C-3.122999906539917,398.59600830078125 -10.71399974822998,405.27899169921875 -20.700000762939453,408.9739990234375 C-21.576000213623047,409.2980041503906 -22.472999572753906,409.5989990234375 -23.385000228881836,409.8710021972656 C-23.385000228881836,409.8710021972656 -23.386999130249023,409.8710021972656 -23.386999130249023,409.87298583984375 C-32.819000244140625,412.6860046386719 -43.854000091552734,412.3190002441406 -52.57699966430664,401.4859924316406 C-59.36600112915039,407.0660095214844 -73.93499755859375,410.02899169921875 -86.76599884033203,411.59698486328125 C-86.76599884033203,411.59698486328125 -86.76599884033203,779.781982421875 -86.76599884033203,779.781982421875 C-86.76599884033203,779.781982421875 595.9149780273438,779.781982421875 595.9149780273438,779.781982421875 C595.9149780273438,779.781982421875 595.9149780273438,411.5050048828125 595.9149780273438,411.5050048828125 C595.6270141601562,411.5780029296875 595.3389892578125,411.6440124511719 595.051025390625,411.70599365234375 C594.0360107421875,411.9280090332031 593.0170288085938,412.0920104980469 592.0029907226562,412.1919860839844z" class="ilk-dalga" style="transform: translateX(100%); transition: transform 60s linear;"></path></g></g><g transform="matrix(1,0,0,1,-107.537841796875,-376.5538330078125)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(123,228,219)" fill-opacity="1" d=" M594.9299926757812,418.635986328125 C594.6090087890625,417.7229919433594 594.3460083007812,416.739990234375 594.1389770507812,415.6839904785156 C593.530029296875,416.91400146484375 592.77099609375,418.0589904785156 591.8820190429688,419.1210021972656 C586.5780029296875,425.468994140625 576.666015625,428.84600830078125 566.7329711914062,429.3110046386719 C564.7990112304688,429.4020080566406 562.8619995117188,429.3810119628906 560.9580078125,429.25 C551.677001953125,428.614990234375 543.1840209960938,425.3590087890625 539.4099731445312,419.5320129394531 C539.343994140625,419.42999267578125 539.281005859375,419.33099365234375 539.2169799804688,419.22698974609375 C539.2169799804688,419.22698974609375 539.2169799804688,419.22698974609375 539.2169799804688,419.2250061035156 C538.7769775390625,418.5050048828125 538.406982421875,417.7439880371094 538.1170043945312,416.9469909667969 C537.7529907226562,417.5780029296875 537.302978515625,418.1919860839844 536.7739868164062,418.78900146484375 C536.5070190429688,419.093994140625 536.2210083007812,419.3919982910156 535.9140014648438,419.68701171875 C531.5469970703125,423.8819885253906 523.3930053710938,427.0429992675781 514.9509887695312,428.1820068359375 C513.4429931640625,428.3869934082031 511.927001953125,428.5270080566406 510.4209899902344,428.5929870605469 C500.4309997558594,429.0509948730469 490.90899658203125,426.4230041503906 487.6719970703125,419.06298828125 C483.84100341796875,428.2279968261719 475.5199890136719,429.302001953125 467.0780029296875,427.4100036621094 C466.9960021972656,427.3909912109375 466.9169921875,427.37298583984375 466.83599853515625,427.35400390625 C457.85699462890625,425.2820129394531 448.7879943847656,419.91400146484375 444.885009765625,417.4079895019531 C444.885009765625,417.4079895019531 444.8840026855469,417.4079895019531 444.8840026855469,417.4079895019531 C443.6210021972656,416.59698486328125 442.8999938964844,416.08599853515625 442.8999938964844,416.08599853515625 C442.8999938964844,416.08599853515625 442.6860046386719,416.2650146484375 442.2820129394531,416.5780029296875 C440.4460144042969,418.00299072265625 434.6990051269531,422.2309875488281 427.3580017089844,425.28399658203125 C425.58099365234375,426.02301025390625 423.7090148925781,426.6919860839844 421.7770080566406,427.2380065917969 C412.0469970703125,429.98199462890625 400.78399658203125,429.5509948730469 392.1919860839844,418.7330017089844 C391.7049865722656,418.1189880371094 391.2239990234375,417.47100830078125 390.75799560546875,416.78900146484375 C390.2019958496094,415.9859924316406 389.6619873046875,415.135986328125 389.1369934082031,414.2340087890625 C388.9049987792969,414.66400146484375 388.6709899902344,415.0799865722656 388.42999267578125,415.489013671875 C388.04901123046875,416.135986328125 387.6579895019531,416.7590026855469 387.25799560546875,417.35400390625 C384.6860046386719,421.1830139160156 381.718994140625,423.97900390625 378.50799560546875,425.95599365234375 C376.4599914550781,427.218994140625 374.31298828125,428.1470031738281 372.1080017089844,428.7959899902344 C352.5090026855469,434.56500244140625 328.37200927734375,418.2409973144531 328.37200927734375,418.2409973144531 C328.37200927734375,418.2409973144531 296.0190124511719,444.9599914550781 278.65399169921875,419.6789855957031 C270.8500061035156,431.0820007324219 240.6929931640625,436.4280090332031 228.22300720214844,419.364013671875 C196.76600646972656,443.7049865722656 162.8520050048828,413.0119934082031 162.8520050048828,413.0119934082031 C162.8520050048828,413.0119934082031 148.6840057373047,428.8500061035156 128.18699645996094,427.7300109863281 C108.62100219726562,426.6600036621094 100.24099731445312,418.7560119628906 100.24099731445312,418.7560119628906 C100.24099731445312,418.7560119628906 83.59500122070312,433.9079895019531 65.1719970703125,429.12200927734375 C63.22100067138672,428.6159973144531 61.24800109863281,427.885986328125 59.27399826049805,426.88800048828125 C55.09299850463867,424.7799987792969 50.90299987792969,421.47698974609375 46.86899948120117,416.5899963378906 C46.810001373291016,416.5199890136719 46.755001068115234,416.47900390625 46.694000244140625,416.4639892578125 C46.694000244140625,416.4639892578125 46.69200134277344,416.4639892578125 46.69200134277344,416.4639892578125 C46.61399841308594,416.4429931640625 46.53499984741211,416.47198486328125 46.444000244140625,416.5419921875 C46.444000244140625,416.5419921875 46.44200134277344,416.5419921875 46.44200134277344,416.5419921875 C45.007999420166016,417.64599609375 41.415000915527344,429.3269958496094 12.47700023651123,427.92498779296875 C11.527000427246094,427.8789978027344 10.614999771118164,427.8110046386719 9.734999656677246,427.7239990234375 C7.125999927520752,427.4630126953125 4.818999767303467,427.0270080566406 2.7839999198913574,426.47100830078125 C-7.250999927520752,423.72900390625 -10.744000434875488,418.0509948730469 -11.736000061035156,415.90399169921875 C-11.980999946594238,415.3710021972656 -12.072999954223633,415.05499267578125 -12.072999954223633,415.05499267578125 C-12.072999954223633,415.05499267578125 -12.885000228881836,415.74200439453125 -14.331999778747559,416.79998779296875 C-14.331999778747559,416.79998779296875 -14.333999633789062,416.79998779296875 -14.333999633789062,416.802001953125 C-18.631000518798828,419.94500732421875 -28.520000457763672,426.3489990234375 -39.358001708984375,427.6969909667969 C-40.722999572753906,427.86700439453125 -42.104000091552734,427.95599365234375 -43.4900016784668,427.95001220703125 C-50.59400177001953,427.9129943847656 -57.84700012207031,425.3320007324219 -64.00599670410156,417.9739990234375 C-68.87999725341797,421.8280029296875 -77.57099914550781,424.447998046875 -86.88800048828125,426.22601318359375 C-86.88800048828125,426.22601318359375 -86.88800048828125,786.7109985351562 -86.88800048828125,786.7109985351562 C-86.88800048828125,786.7109985351562 595.7940063476562,786.7109985351562 595.7940063476562,786.7109985351562 C595.7940063476562,786.7109985351562 595.7940063476562,420.6889953613281 595.7940063476562,420.6889953613281 C595.7860107421875,420.67498779296875 595.7789916992188,420.65899658203125 595.77099609375,420.6440124511719 C595.4600219726562,420.0150146484375 595.177978515625,419.34698486328125 594.9299926757812,418.635986328125z" class="ikinci-dalga" style="transform: translateX(100%); transition: transform 45s linear;"></path></g></g><g transform="matrix(1,0,0,1,-14.861541748046875,-496.5076599121094)" opacity="0.2193" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,-70.91000366210938,121.10900115966797)"><path fill="rgb(107,180,235)" fill-opacity="1" d=" M592.0029907226562,442.72900390625 C583.9000244140625,443.5379943847656 576.114013671875,440.3179931640625 574.1320190429688,429.7550048828125 C570.2789916992188,437.8429870605469 560.093017578125,442.281005859375 549.583984375,443.1400146484375 C548.3800048828125,443.239990234375 547.1699829101562,443.2909851074219 545.9660034179688,443.2950134277344 C543.7210083007812,443.30499267578125 541.4920043945312,443.1499938964844 539.3380126953125,442.8349914550781 C539.3380126953125,442.8349914550781 539.3380126953125,442.8349914550781 539.3380126953125,442.8330078125 C538.510986328125,442.7149963378906 537.6959838867188,442.5690002441406 536.89599609375,442.3970031738281 C529.2230224609375,440.77899169921875 522.8779907226562,436.9679870605469 520.7860107421875,431.0039978027344 C514.3179931640625,442.6600036621094 479.4440002441406,448.90899658203125 472.7539978027344,433.10198974609375 C468.89898681640625,442.6860046386719 460.27301025390625,443.3290100097656 451.7770080566406,441.0159912109375 C451.7770080566406,441.0159912109375 451.7749938964844,441.0159912109375 451.7749938964844,441.0159912109375 C450.8739929199219,440.77099609375 449.9750061035156,440.4930114746094 449.0840148925781,440.1860046386719 C439.14300537109375,436.7919921875 430.1199951171875,430.156005859375 430.1199951171875,430.156005859375 C430.1199951171875,430.156005859375 413.27899169921875,444.70001220703125 397.25299072265625,442.34100341796875 C395.5350036621094,442.0899963378906 393.82598876953125,441.6419982910156 392.14801025390625,440.9620056152344 C391.7229919433594,440.7900085449219 391.3009948730469,440.60198974609375 390.8800048828125,440.3970031738281 C390.0950012207031,440.0190124511719 389.3169860839844,439.5889892578125 388.5509948730469,439.09698486328125 C385.04998779296875,436.8550109863281 381.7699890136719,433.3919982910156 378.92498779296875,428.3219909667969 C361.9280090332031,461.010986328125 321.06201171875,432.2879943847656 321.06201171875,432.2879943847656 C321.06201171875,432.2879943847656 290.2539978027344,458.72900390625 273.7179870605469,433.7090148925781 C266.2879943847656,444.9939880371094 237.57200622558594,450.2860107421875 225.69700622558594,433.39801025390625 C195.74000549316406,457.4880065917969 163.447998046875,427.1109924316406 163.447998046875,427.1109924316406 C163.447998046875,427.1109924316406 149.95700073242188,442.7869873046875 130.43800354003906,441.677001953125 C111.80599975585938,440.61700439453125 103.8270034790039,432.7969970703125 103.8270034790039,432.7969970703125 C103.8270034790039,432.7969970703125 75.77400207519531,459.3349914550781 53.005001068115234,430.6520080566406 C52.06399917602539,429.4670104980469 51.361000061035156,436.5409851074219 39.75899887084961,440.0719909667969 C39.75899887084961,440.0719909667969 39.75699996948242,440.0719909667969 39.75699996948242,440.0719909667969 C39.67300033569336,440.0989990234375 39.58599853515625,440.12298583984375 39.500999450683594,440.1499938964844 C39.500999450683594,440.1499938964844 39.499000549316406,440.1499938964844 39.499000549316406,440.1499938964844 C34.944000244140625,441.4960021972656 28.7450008392334,442.2969970703125 20.253000259399414,441.8699951171875 C0.17100000381469727,440.8599853515625 -3.122999906539917,429.13299560546875 -3.122999906539917,429.13299560546875 C-3.122999906539917,429.13299560546875 -10.71399974822998,435.8169860839844 -20.700000762939453,439.5119934082031 C-21.576000213623047,439.83599853515625 -22.472999572753906,440.135986328125 -23.385000228881836,440.4079895019531 C-23.385000228881836,440.4079895019531 -23.386999130249023,440.4079895019531 -23.386999130249023,440.4100036621094 C-32.819000244140625,443.2229919433594 -43.854000091552734,442.8559875488281 -52.57699966430664,432.02301025390625 C-59.36600112915039,437.6029968261719 -73.93499755859375,440.5660095214844 -86.76599884033203,442.1340026855469 C-86.76599884033203,442.1340026855469 -86.76599884033203,810.3189697265625 -86.76599884033203,810.3189697265625 C-86.76599884033203,810.3189697265625 595.9149780273438,810.3189697265625 595.9149780273438,810.3189697265625 C595.9149780273438,810.3189697265625 595.9149780273438,442.0419921875 595.9149780273438,442.0419921875 C595.6270141601562,442.114990234375 595.3389892578125,442.1820068359375 595.051025390625,442.2439880371094 C594.0360107421875,442.46600341796875 593.0170288085938,442.6289978027344 592.0029907226562,442.72900390625z" class="ucuncu-dalga" style="transform: translateX(100%); transition: transform 35s linear;"></path></g></g></g>
</g >
</svg>
<g clip-path="url(#__lottie_element_2)">
没有一个元素id="__lottie_element_2"
要创建一个剪辑路径,您需要:
<defs>
以您的非洲形状作为儿童道路创建DEF内部。
由于您在轮廓和剪辑路径上使用了相同的路径,因此最好将非洲的直接孩子创建为
<clipPath>
的直接孩子,然后剪辑路径和轮廓笔划都可以参考该元素。
SVG的外观:
<path>
可以删除所有
<defs>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="350px">
<defs>
<path id="africa" class="your-africa-path" d="..." />
<clipPath id="africa-clippath">
<use clip-path="url(#africa)" href="#africa" />
</clipPath>
</def>
<g id="container">
<g clip-path="url(#africa-clippath)">
<rect class="background-element" width="300" height="350" fill="beige" />
<g class="wave-group-1">...</g>
<g class="wave-group-2">...</g>
<g class="wave-group-3">...</g>
</g>
<use class="africa-outline outside-clippath" path="url(#africa)" href="#africa" stroke="#000" fill="none" />
</g>
</svg>