Necesito crear html usando javascript y quiero agregar un ancla con un polígono a mi svg viewBox
var createHtml = () => { const svg = document.querySelector('svg'); var svgNS = svg.namespaceURI; for (let index = 0; index < 10; index++) { var link = document.createElement("a"); var poly = document.createElement("polygon"); poly.setAttribute("opacity", 1); poly.setAttribute("points", [0, 0, 0, 500, 500, 500, 500, 0]); link.appendChild(poly); svg.appendChild(link); } } createHtml(); <html> <head> </head> <body> <figure id="imagemap"> <svg id="box" viewBox="0 0 1700 1020"> </svg> </figure> <script src="main.js"></script> </body> </html>con esta configuración, puedo ver el html en la herramienta Examinar Chrome, pero no aparece en mi viewBox. Solo si, por ejemplo, cambio la opacidad con "cambiar como html", aparece.
¿Por qué solo aparecería después de cambiar algo CON "cambiar como html", porque al hacer doble clic no se produce ningún cambio? http://jsfiddle.net/n4poxL0a/2/
Debe utilizar correctamente los elementos del espacio de nombres SVG. Además, si desea ir a otra página al hacer clic en la imagen SVG, simplemente agregue un detector de eventos de clic y dentro del detector haga la redirección.
var createHtml = () => { var svg = document.getElementById("imagemap"); //console.log(svg); //var svgNS = svg.namespaceURI; for (let index = 0; index < 10; index++) { var svgImg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgImg.setAttribute("id", "box" + index); svgImg.setAttribute("viewBox", "0 0 1700 1020"); svgImg.setAttribute("onclick", "myFunction(event)"); //svgImg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); var poly = document.createElementNS("http://www.w3.org/2000/svg", "polygon"); poly.setAttribute("opacity", 1); poly.setAttribute("points", [0, 0, 0, 500, 500, 500, 500, 0]); poly.setAttribute("stroke-color", "black"); poly.setAttribute("stroke-width", "1"); //console.log(poly); svgImg.appendChild(poly); svg.appendChild(svgImg); } }; window.onload = function() { createHtml(); }; function myFunction(event) { alert("hello"); } <!DOCTYPE html> <html> <body> <figure id="imagemap"> </figure> </body> </html>la etiqueta es diferente en svg y de alguna manera solo la reconoce después de usar la herramienta de examen. Entonces, si desea crear una etiqueta svg, debe aplicar la etiqueta de nombre (creo)
var link = document.createElement("a");a
var link = document.createElement("http://www.w3.org/2000/svg", "a");