Как я могу предотвратить переполнение элементов SVG? ⇐ Javascript

[Anonymous]

У меня есть карта SVG в Африке, и я хочу встроить в нее второй SVG. Тем не менее, я не могу сделать это из -за проблемы переполнения. Я подозреваю, что я мог бы столкнуться с проблемой отсечения или маскировки. Поскольку края карты Африки нерегулярно, как с отступами, так и выступами, я не уверен, как правильно реализовать это. Может ли кто -нибудь помочь мне с этим? Я прикрепил весь код SVG ниже. < /P>
Спасибо < /p>
Фотографии < /p>
Ниже приведена бесшовная переплетенная структура, которая я хочу, чтобы она была. />

Код: Выделить всё

  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);
});< /code>
@keyframes nomeh {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
}
#mapContainer {
width: 1000px;
height: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.mapWrapper {
position: relative;
width: 300px;
height: 400px;
border: 2px solid #333;
background-color: #d9c69b;
overflow: hidden;
}< /code>
  

Подробнее здесь: https://stackoverflow.com/questions/795 ... verflowing