anchor only works after changing html with the examine tool-CodePudding

I need to create html using javascript and I want to add an anchor with a polygon to my 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>

with this setup I can see the html in the examine chrome tool, but it doesn't show up in my viewBox. Only if I for example change the opacity with "change as html" it does show up.

Why would it only show up after changing something WITH "change as html", because double clicking results in no change? http://jsfiddle.net/n4poxL0a/2/

CodePudding user response：

You have to properly use elements from the SVG namespace. Also, if you want to go to some other page on clicking the SVG image, just add a click event listener and inside the listener do the redirection.

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>

CodePudding user response：

tag is different in svg and it somehow only recognizes it after using the examine tool. So if you want to create and svg tag you need to apply the name tag (I think)

var link = document.createElement("a");

var link = document.createElement("http://www.w3.org/2000/svg", "a");