Я не могу редактировать левое, правое, верхнее или нижнее положение, несмотря на то, что SVG имеет позицию: абсолютную. ⇐ CSS

[Anonymous]

Я хочу обвести другое веко контуром (с классом «other_eyelid_outline») здесь:

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

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

document.addEventListener('keydown', (event) => {
if (event.key === 's' || event.key === 'S') {
const headColor = document.getElementById('head_color');
headColor.setAttribute('fill', getRandomColor());

// Optional: If eyelids need to match the head color, add this:
const eyelids = document.getElementById('eyelids_color');
eyelids.setAttribute('fill', headColor.getAttribute('fill'));
}
});
document.addEventListener('DOMContentLoaded', function() {
const pupils = document.getElementById('pupils'); // Group containing both pupils

document.addEventListener('mousemove', function(event) {
const eyesSvg = document.getElementById('eyes_svg');
const eyesBox = eyesSvg.getBoundingClientRect();

// Approximate center of the eyes (you may need to adjust these values based on your design)
const eyeCenterX = eyesBox.left + eyesBox.width / 2;
const eyeCenterY = eyesBox.top + eyesBox.height / 2;

const maxPupilMovement = 10; // Maximum movement inside the eye

// Calculate the mouse position relative to the center of the eyes
const mouseX = event.clientX;
const mouseY = event.clientY;

// Calculate the angle and distance for pupil movement
const angle = Math.atan2(mouseY - eyeCenterY, mouseX - eyeCenterX);
const distance = Math.min(maxPupilMovement, Math.hypot(mouseX - eyeCenterX, mouseY - eyeCenterY));

// Calculate the new pupil positions
const pupilX = Math.cos(angle) * distance;
const pupilY = Math.sin(angle) * distance;

// Apply the transformation to the pupils group (move it down based on calculated values)
pupils.setAttribute('transform', `translate(${48.5 + pupilX}, ${29.0 + pupilY})`);
});
});

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

.character {
position: relative;
}

.guide {
position: absolute;
}

.part {
position: absolute;
}

.eyes {
position: absolute;
z-index: 3;
left: 19px;
}

.eyesoutline {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
}

.whole_head {
position: absolute;
animation: float 2s ease-in-out infinite;
}

.head {
position: absolute;
margin-top: 19px;
z-index: 2;
}

.headcolor {
z-index: 1;
margin-top: -500px;
position: relative;
}

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

@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}

/* Wipe-in and wipe-out animation for the eyelid (VERTICAL wipe) */

@keyframes wipe-in-out-eyelid {
0% {
clip-path: inset(0 0 100% 0); /* Fully hidden from the bottom */
}
5% {
clip-path: inset(0 0 0 0); /* Fully visible (wipe-in complete) */
}
10% {
clip-path: inset(0 0 100% 0); /* Fully hidden again (wipe-out complete) */
}
100% {
clip-path: inset(0 0 100% 0); /* Stay hidden for the rest of the duration */
}
}

@keyframes eyelids-outlines {
0% {
transform: translateY(5px);
}
5% {
transform: translateY(50px); /*full length of the eye.*/
}
10% {
transform: translateY(5px);
}
100% {
transform: translateY(5px);
}
}

.eyelid {
fill: #ffcc66; /* Eyelid color */
animation: wipe-in-out-eyelid 5s ease-out infinite;  /* Wipe animation */
transform-origin: center;
position: relative;
bottom: 0;
}
/* Animation for the line growing down, shrinking, and moving back up */
.eyelid_outline {
animation: eyelids-outlines 5s ease-out infinite;
transform-origin: center;
position:  relative;
top:8px;
}

.other_eyelid_outline {
position:absolute;
}

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

Character Assembly

Я зашел в инструменты разработки моего браузера, чтобы проверить, позволят ли они мне перемещать самые внешние поля (вы знаете, атрибуты «верхний», «снизу», «левый», «правый»), но я не смог их увидеть в слое предварительного просмотра:


По сути, Other_eyelid_outline может плавать вверх и вниз вместе с контуром левого века, но проблема в том, что я не могу редактировать верх, низ и т. д. на линииother_eyelid_outline, несмотря на то, что его позиция абсолютна. Что мне следует изменить, чтобы сдвинуть это веко?

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