Как масштабировать путь клипа с помощью SVG и контейнера ⇐ CSS

[Anonymous]

Я пытаюсь создать симуляцию резервуара для воды в React. Идея состоит в том, чтобы использовать clip-path, чтобы ограничить анимированную волну формой значка танка (определяемой как путь SVG).
Путь SVG отображается правильно, но когда я использую его в качестве пути обрезки, размер пути обрезки не соответствует исходному пути SVG. Вместо этого волна выглядит смещенной или вообще не обрезанной.
Я попробовал добавить clipPathUnits="objectBoundingBox", но из-за этого клип-путь полностью исчез. .
введите здесь описание изображения
Вот мой компонент React:
Компонент React:

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

import styles from "./WaterTankSmall.module.css";

const waterLevel = 50;

const WaterTankSmall = () => {
return (

{/* SVG */}










{/* wave container*/}

{[...Array(4)].map((_, i) => (

))}
{`${waterLevel}%`}


);
};

export default WaterTankSmall;

module.css ниже

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

  display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #f0f8ff;
}

#waterTankClip {
width: 100px;
height: 100px;
}

.svgIcon {
width: 500px;
height: 500px;
fill: none;
stroke-width: 1;
stroke: #1e90ff;
}

.waveContainer {
background-color: pink;
width: 100%;
}

.wave {
position: absolute;
bottom: 0;
/* left: -100%;
width: 5000px;
height: 2500px;
background: linear-gradient(to bottom, #87ceeb, #1e90ff);
clip-path: polygon(
0% 50%,
10% 45%,
20% 50%,
30% 55%,
40% 50%,
50% 45%,
60% 50%,
70% 55%,
80% 50%,
90% 45%,
100% 50%,
100% 100%,
0% 100%
);
z-index: 0;
}

.wave1 {
background: linear-gradient(to bottom, #87ceeb, #1e90ff);
opacity: 0.7;
animation: wave1-animation 6s infinite ease-in-out;
}

.wave2 {
background: linear-gradient(
to bottom,
rgba(135, 206, 235, 0.5),
rgba(30, 144, 255, 0.5)
);
opacity: 0.5;
animation: wave2-animation 8s infinite ease-in-out;
}

.wave3 {
background: linear-gradient(
to bottom,
rgba(135, 206, 235, 0.4),
rgba(30, 144, 255, 0.4)
);
opacity: 0.3;
animation: wave3-animation 10s infinite ease-in-out;
}

.wave4 {
background: linear-gradient(
to bottom,
rgba(135, 206, 235, 0.6),
rgba(30, 144, 255, 0.6)
);
opacity: 0.4;
animation: wave4-animation 12s infinite ease-in-out;
}

/* Wave animation*/
@keyframes wave1-animation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-30%);
}
100% {
transform: translateX(0);
}
}

@keyframes wave2-animation {
0% {
transform: translateX(-25%);
}
50% {
transform: translateX(25%);
}
100% {
transform: translateX(-25%);
}
}

@keyframes wave3-animation {
0% {
transform: translateX(-15%);
}
50% {
transform: translateX(15%);
}
100% {
transform: translateX(-15%);
}
}

@keyframes wave4-animation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-20%);
}
100% {
transform: translateX(0);
}
}

Что я пробовал:
Настройка viewBox и saveAspectRatio SVG.
Добавление/удаление clipPathUnits="objectBoundingBox" или userSpaceOnUse.
Обеспечение соответствия размеров SVG и CSS.


Подробнее здесь: https://stackoverflow.com/questions/793 ... -container