0
194
Visualizações¿Cómo dibujar líneas dinámicamente en una imagen SVG?
Estoy tratando de desarrollar un Attack Map cuando, básicamente, como todos los mapas, mostrará los "ataques" que están ocurriendo en todo el mundo, pero básicamente serán aleatorios ya que no tengo acceso a las APIs AV's para obtener los datos correctos. A partir de ahora, solo tengo este SVG map se muestra en mi página HTML: 
Y me gustaría dibujar algunas líneas de un país a otro para simular los ataques. He estado buscando sobre esto y he visto dos "soluciones". Uno es un código JS que dibuja una línea en HTML :
if (stroke){ ctx.strokeStyle = stroke; } if (width){ ctx.lineWidth = width; } ctx.beginPath(); ctx.moveTo(...begin); ctx.lineTo(...end); ctx.stroke(); } const canvas = document.querySelector("#line"); if(canvas.getContext){ const ctx = canvas.getContext('2d'); drawLine(ctx, [100, 100], [300, 100], 'green', 5) } pero como dije, esto dibuja una línea fuera del SVG map y dentro de HTML. También vi una etiqueta line que se puede colocar dentro de las etiquetas SVG , pero es estática. Quiero ser dinámico y simular los ataques. ¿Hay alguna manera de que pueda hacer esto? ¡Gracias por tu tiempo!
1 Respostas
Responde à pergunta0
Incluso si el elemento SVG es estático, puede agregar elementos <line /> dinámicamente cuando se haya cargado el DOM:
const lines = [ { from: { x: 0, y: 20 }, to: { x: 30, y: 60 } }, { from: { x: 0, y: 20 }, to: { x: 30, y: 60 } } ]; function addLine (x1, y1, x2, y2) { const line = document.createElementNS('http://www.w3.org/2000/svg','line'); line.setAttribute("x1", x1); line.setAttribute("y1", y1); line.setAttribute("x2", x2); line.setAttribute("y2", y2); line.setAttribute("stroke", "white"); document.getElementById("mySvg").appendChild(line); } addEventListener("DOMContentLoaded", function () { for (const line of lines) { addLine(line.from.x, line.from.y, line.to.x, line.to.y); } });