Vi este ejemplo en w3schools donde establece atributos de línea svg como x1, y1, x2, y2 y aparece una línea en la pantalla. Estoy usando el mismo método para dibujar la línea svg entre elementos div usando javascript y parece que no funciona.
Tengo dos círculos desde los que leo los valores x e y usandoboundingClientRect en javascript y configurándolo en la línea svg usando el atributo set. Quiero una línea que conecte esos dos círculos.
Aquí está mi código
const circle1 = document.querySelector('.circle--1'); const circle2 = document.querySelector('.circle--2'); const line1 = document.querySelector('#line-1'); line1.setAttribute('x1', circle1.getBoundingClientRect().x); line1.setAttribute('y1', circle1.getBoundingClientRect().y); line1.setAttribute('x2', circle2.getBoundingClientRect().x); line1.setAttribute('y2', circle2.getBoundingClientRect().y); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { font-family: sans-serif; } .header { width: 100%; height: 57rem; background-image: linear-gradient(to right, #64b5f6, #1976d2); padding: 0 2rem; } .graph { width: 100%; max-width: 120rem; background-color: grey; height: 100%; position: relative; } .circle { width: 5rem; height: 5rem; border-radius: 50%; background-color: white; font-size: 2rem; display: flex; align-items: center; justify-content: center; position: absolute; } .circle--1 { left: 0; bottom: 5%; } .circle--1 { left: 10%; bottom: 60%; } .circle--2 { right: 10%; bottom: 60%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./style.css" /> <title>Connect Divs</title> </head> <body> <header class="header"> <div class="graph"> <div class="circle circle--1">1</div> <div class="circle circle--2">2</div> <svg> <line id="line-1" style="stroke: rgb(255, 255, 255); stroke-width: 3" /> </svg> </div> </header> <script src="./script.js"></script> </body> </html>Un elemento svg tiene un tamaño y su línea está fuera de esa área.
La configuración predeterminada para un svg es:
svg:not(:root) { overflow: hidden; }por lo que su línea no será visible.
Si agregas esto a tu estilo:
svg { overflow: visible; border: 1px solid red; } Verá dónde se encuentra su svg y su dimensión, y overflow: visible; hace que la línea sea visible:
const circle1 = document.querySelector('.circle--1'); const circle2 = document.querySelector('.circle--2'); const line1 = document.querySelector('#line-1'); line1.setAttribute('x1', circle1.getBoundingClientRect().x); line1.setAttribute('y1', circle1.getBoundingClientRect().y); line1.setAttribute('x2', circle2.getBoundingClientRect().x); line1.setAttribute('y2', circle2.getBoundingClientRect().y); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { font-family: sans-serif; } .header { width: 100%; height: 57rem; background-image: linear-gradient(to right, #64b5f6, #1976d2); padding: 0 2rem; } .graph { width: 100%; max-width: 120rem; background-color: grey; height: 100%; position: relative; } .circle { width: 5rem; height: 5rem; border-radius: 50%; background-color: white; font-size: 2rem; display: flex; align-items: center; justify-content: center; position: absolute; } .circle--1 { left: 0; bottom: 5%; } .circle--1 { left: 10%; bottom: 60%; } .circle--2 { right: 10%; bottom: 60%; } svg { overflow: visible; border: 1px solid red; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./style.css" /> <title>Connect Divs</title> </head> <body> <header class="header"> <div class="graph"> <div class="circle circle--1">1</div> <div class="circle circle--2">2</div> <svg> <line id="line-1" style="stroke: rgb(255, 255, 255); stroke-width: 3" /> </svg> </div> </header> <script src="./script.js"></script> </body> </html> Pero en lugar de usar overflow: visible; debe cambiar el tamaño y/o el posicionamiento del svg .