0
147
Visualizaçõesconectando divs con línea svg
for (el of chart.children) { i++ previous__element = chart.children[i - 1] if (el.classList.contains('rule')) { //pass } else { line = el.children[0].children[0] pos1 = previous__element.children[2].getBoundingClientRect() position1 = { top: pos1.top, left: pos1.left, } pos2 = el.children[2].getBoundingClientRect() console.log(previous__element.children[2]) console.log(el.children[2]) position2 = { top: pos2.top, left: pos2.left, } line.setAttribute('x1', Math.trunc(pos1.left)) line.setAttribute('y1', Math.trunc(pos1.top)) line.setAttribute('x2', Math.trunc(pos1.left)) line.setAttribute('y2', Math.trunc(pos1.top)) line.setAttribute('stroke', 'white') } }html que obtiene salida:
Por alguna razón, esto en realidad no muestra las líneas, cuando se pasa el mouse sobre ellas en las herramientas de desarrollo, muestra que la altura y el ancho son 0. Estoy tratando de hacer que la línea se conecte a los marcadores en los elementos.
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
En este ejemplo, uso la posición relativa/absoluta en todos los elementos. No sé si eso se ajusta a su solución, pero el núcleo del ejemplo es que el documento SVG está en el fondo de todos los cuadros. Entonces, todas las líneas podrían colocarse en ese único documento SVG.
Tal vez la razón por la que sus líneas no se muestran es que pierden el ancho del trazo o que su elemento SVG no tiene un ancho y una altura.
let chart = document.querySelector('#chart'); let poschart = chart.getBoundingClientRect(); let line = chart.querySelector('svg line'); let boxs = chart.querySelectorAll('div.box'); let pos1 = boxs[0].getBoundingClientRect(); line.setAttribute('x1', pos1.x+pos1.width/2-poschart.x); line.setAttribute('y1', pos1.y+pos1.height/2-poschart.y); let pos2 = boxs[1].getBoundingClientRect(); line.setAttribute('x2', pos2.x+pos2.width/2-poschart.x); line.setAttribute('y2', pos2.y+pos2.height/2-poschart.y); #chart { position: relative; width: 400px; height: 300px; margin: 10px 20px; border: thin solid black; } #chart svg { position: absolute; } .box { position: absolute; padding: .5em; border: thin solid black; background-color: white; } <div id="chart"> <svg viewBox="0 0 400 300" width="100%" height="100%"> <line stroke="black" stroke-width="2"/> </svg> <div class="box" style="left:50px;top:180px">Box 1</div> <div class="box" style="left:310px;top:100px">Box 2</div> </div>
·
Juan Pablo Isaza
Relatório
Responde à pergunta