anchor only works after changing html with the examine tool

Question

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/

the programm this is running on only works with the viewBox, kind of. — Juli Sharow, Nov 22 '21 at 10:06
I need to have clickable polygons in my viewbox that link to some specific stuff. I want to create them with javascript so you can reuse the script for different polygons — Juli Sharow, Nov 22 '21 at 10:15
You probably need to have multiple SVGs and each SVG should have a click event listener attached. — kiner_shah, Nov 22 '21 at 10:17
but still, why wouldn't the created html work. Is this something that's normal? — Juli Sharow, Nov 22 '21 at 10:23
sadly didn't work. Have you tried the jsfiddle? Does the same thing happen on your device? — Juli Sharow, Nov 22 '21 at 11:09
Please see this link: https://stackoverflow.com/questions/32637811/how-can-i-add-a-svg-graphic-dynamically-using-javascript-or-jquery — kiner_shah, Nov 22 '21 at 11:13

score 0 · Answer 1 · answered Nov 22 '21 at 11:25

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>

I really appreciate the time you took for this, but it's very import to have the tag used as the link. I did find out that there's an overlap to html and svg so I guess this might be the problem. — Juli Sharow, Nov 22 '21 at 11:49

score 0 · Answer 2 · answered Nov 22 '21 at 11:53

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");

to

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

anchor only works after changing html with the examine tool

2 Answers2