Слои SVG в HTML ⇐ Html

[Anonymous]

В настоящее время я пытаюсь создать анимацию апертуры в HTML, но я сталкиваюсь с проблемой, в которой последний нарисованный плавник перекрывает первые нарисованные плавники (что имеет смысл), но я не могу понять, как лучше всего поднять его, что Fin 6 лежит под плавником 1 и 2. Когда я изменяю трансформацию Translatey (%) в таблице стиля, апертура открывается и закрывается правильно, за исключением конечного плавника.
плавники так, что красный, правильно следующий за рисунком и покрыты /маскируются голубой и черной плавниками. < /p>

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

:root {
--aperture-size: 300px;
}

.aperture-wrapper {
width: var(--aperture-size);
height: var(--aperture-size);
position: relative;
border-radius: 50%;
overflow: hidden;
background: #111;
}

.blade-container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform-origin: center;
transform: translate(-50%, -50%) rotate(var(--angle));
transition: transform 1s ease;
}

.blade {
width: 100%;
height: 100%;
transform-origin: center;
transform: translateY(20%);
transition: transform 1s ease;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/796 ... gs-in-html