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

[Anonymous]

Фоновое изображение без элементов SVG < /p>
Элементы SVG абсолютно расположены в макете, но между ними нет структурной или программной связи. Это означает, что их размещение полностью зависит от вручную рассчитанных значений пикселей/процентных значений, что становится серьезной задачей по следующей причине:
Полноэкрановое фоновое масштабирование: фоновое изображение установлено для того, чтобы занять весь экран (фоновый размер: Cover), и при изменении размера экрана изображение соответственно. Тем не менее, это масштабирование не является равномерным или предсказуемым. Сделать адаптивное макет означает, что пересчет и регулировка положения каждого элемента SVG для множественных точек перерыва экрана или размеров. Нет никакого способа программно «привязывать» SVGs к определенным его частям. Каждая позиция должна быть вручную настроена и обновлена ​​на изменение устройства или макета. Решение фокусируется на выравнивании SVG точно для этих ключевых точек останова, в то время как намеренно оставляя поддержку для промежуточных размеров экрана, чтобы уменьшить сложность и обслуживание. Цель состоит в том, чтобы гарантировать, что круг SVG всегда расположен над беспилотником на фоновом изображении, независимо от размера экрана, для отзывчивого веб -дизайна. Дрон является частью фонового изображения, и я хочу, чтобы круг оставался в соответствии с ним на всех устройствах.
конвертирование растрового изображения (.png) в SVG не допускается в этом случае. /> код: < /p>



SVG Line and Text Animation

body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}

.device-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}

.background {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.marker {
position: absolute;
top: 20%;
right: 20%;
width: 24px;
height: 24px;
transform: translate(50%, -50%);
z-index: 2;
cursor: pointer;
}

.line {
position: absolute;
top: 20%;
right: 20%;
width: 0;
height: 2px;
background-color: red;
transform-origin: 0 0;
transition: width 1s ease-out;
}

.text {
position: absolute;
top: 20%;
right: 20%;
opacity: 0;
transform: translate(20px, -50%);
transition: opacity 1s ease-out;
}

.marker.clicked + .line {
width: 200px; /* Adjust the length of the line */
}

.marker.clicked + .line + .text {
opacity: 1;
transform: translate(220px, -50%); /* Adjust the position of the text */
}





alt="Tech Devices"
class="background"
/>




This is XXX Drone



const marker = document.getElementById('marker');
const line = document.querySelector('.line');
const text = document.querySelector('.text');

marker.addEventListener('click', () => {
marker.classList.remove('clicked');
void marker.offsetWidth; // Force reflow
marker.classList.add('clicked');
});





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