Помещение одного объекта перед другим (и покрытие всего другого объекта) ⇐ CSS

[Anonymous]

У меня есть два файла SVG: прозрачный овал с контуром и цветной овал без контура. Я хочу полностью покрыть цветной овал прозрачным очерченным овалом, но он продолжает не совпадать со сторонами овала. Вот мой CSS-код и результат:

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

.character {
position: relative;
width: 200px; /* Adjust the size as needed */
height: 400px; /* Adjust the size as needed */
}

.part {
position: absolute;
}

.head {
animation: float 2s ease-in-out infinite;
}
.headcolor {
z-index: 1;
margin-top: -200px;
position: relative;
top: 0;
left: 0;
}

.headoutline {
z-index: 2;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@keyframes float {
0%, 100% {
transform: translateY(0); /* Starting position */
}
50% {
transform: translateY(-5px); /* Float up by 10 pixels */
}
}

При изменении верхнего края .headcolor на -500px ничего не изменится:
[img]https://i.sstatic.net /t4bGI9yf.png[/img]

А вот как должен выглядеть мой результат: два моих svg-файла и мой HTML-код.

https://svgshare.com/i /1Aqg.svg

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

Character Assembly

ОБНОВЛЕНИЕ 26 сентября: я отредактировал эту часть CSS:

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

.headoutline {
z-index: 2;
position: relative; margin
width: 100%;
height: 100%;
}

А теперь SVG-файлы стали ближе. Но контур все равно не покрывает весь цветной овал...



Подробнее здесь: https://stackoverflow.com/questions/790 ... her-object