Estoy tratando de crear una imagen en la que se pueda hacer clic usando svg. Dentro del svg, tendría varios elementos rect (las partes de la imagen en las que quiero que se pueda hacer clic) y alrededor de ellos colocaría elementos de anclaje para que se pueda hacer clic en ellos. Cuando hago esto usando solo html, funciona sin problemas:
<a href="test.html"> <rect style="fill:#00ff00;stroke-width:0.264583" id="rect142" width="33.816833" height="24.259901" x="172.39232" y="63.95792" /> </a>Sin embargo, necesito hacer esto dinámicamente, así que quiero usar javascript para insertar el elemento rect y el ancla. Insertar el elemento solo funciona, pero cuando intento insertarlo dentro de un ancla, no aparece nada. Aquí está mi código javascript:
console.log("in") // make a simple rectangle var newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); newRect.setAttribute("id", "rect604-1"); newRect.setAttribute("x", "172.39232"); newRect.setAttribute("y", "63.95792"); newRect.setAttribute("width", "33.816833"); newRect.setAttribute("height", "24.259901"); newRect.setAttribute("fill", "#00ff00"); newRect.setAttribute("opacity", "0.66"); newRect.setAttribute("fill-opacity", "1"); newRect.setAttribute("fill-rule", "evenodd"); newRect.setAttribute("stroke-width", "0.264583"); var aTag = document.createElement('a'); aTag.setAttribute('href',"test.html"); var svg = document.getElementById("svg12"); console.log(svg) // append the new rectangle to the svg aTag.appendChild(newRect); svg.appendChild(aTag); //$("#rect604-1").wrap("<a href='https://mail.google.com/mail/u/0/#inbox'></a>");¿Alguna idea de por qué mi código no funciona?
Para crear un enlace con un objeto svg, debe usar un ancla svg en lugar de un ancla html. así que reemplaza
var aTag = document.createElement('a');por
var aTag = document.createElementNS("http://www.w3.org/2000/svg", "a")