Wie kann ich die Ausrichtung absolut positionierter SVG-Elemente über ein umfassendes Hintergrundbild genau positioniere ⇐ CSS

[Anonymous]

Hintergrundbild ohne SVG -Elemente < /p>
Die SVG -Elemente sind im Layout absolut positioniert, aber es gibt keinen strukturellen oder programmatischen Zusammenhang zwischen ihnen und dem Hintergrundbild. Dies bedeutet, dass ihre Platzierung vollständig von manuell berechneten Pixel-/Prozentwerten abhängt, was aufgrund der folgenden Gründe zu einer schwerwiegenden Herausforderung wird:
Hintergrund-Skalierung von Vollbild-Hintergrund: Das Hintergrundbild wird so eingestellt, dass der gesamte Bildschirm (Hintergrundgröße: Deckung) und die Bildschirmgröße ändert, und das Bildmaßstab. Diese Skalierung ist jedoch nicht einheitlich oder vorhersehbar. Das Layout reagieren bedeutet, die Position jedes SVG -Elements für mehrere Bildschirme Breakpoints oder Dimensionen neu zu berechnen und anzupassen. Es gibt keine Möglichkeit, die SVGs programmgesteuert zu „verankern“. Jede Position muss manuell optimiert und pro Gerät oder Layoutänderung aktualisiert werden. Die Lösung konzentriert sich darauf, SVGs genau für diese Schlüsselbrandbezeichnungen auszurichten, während sie absichtlich die Unterstützung für die zwischen den Bildschirmgrößen und die Verringerung der Komplexität und den Wartungsaufwand auslassen. Ziel ist es, sicherzustellen, dass der SVG -Kreis immer über die Drohne auf dem Hintergrundbild positioniert ist, unabhängig von der Bildschirmgröße für ein reaktionsschnelles Webdesign. Die Drohne ist Teil des Hintergrundbildes, und ich möchte, dass der Kreis auf allen Geräten mit ihm ausgerichtet bleibt. /> Code: < /p>

Code: Select all

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 */
}




[img]https://images.unsplash.com/photo-1581091012184-7c24a4b9f1b5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080[/img]
      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');
});