JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<div id="svg-container"></div>

JavaScript

/**
 * (c) http://stackoverflow.com/questions/6077590/create-svg-anchor-element-programmatically
 */
createOn = function(root,name,attrs,text) {
  var doc = root.ownerDocument,
      svg = root.ownerSVGElement || root;
  var svgNS = svg.getAttribute('xmlns');
  var el = doc.createElementNS(svgNS,name);
  for (var attr in attrs) {
    if (!attrs.hasOwnProperty(attr))
        continue;
    var parts = attr.split(':');
    if (parts[1]) {
        el.setAttributeNS(svg.getAttribute('xmlns:'+parts[0]),
                          parts[1],
                          attrs[attr]);
    }
    else
        el.setAttributeNS(null, attr, attrs[attr]);
  }
  if (text)
      el.appendChild(document.createTextNode(text));
  return root.appendChild(el);
}

var container = document.getElementById("svg-container");
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var svg = document.createElementNS(svgNS, "svg");
svg.setAttribute('xmlns', svgNS);
svg.setAttribute('xmlns:xlink', xlinkNS);
container.appendChild(svg);

for (var i = 0; i < 5; i++) {        
    var num = i+1;
    var anchor = createOn(svg, 'a', {'xlink:href': 'page'+num+'.html'});
    createOn(anchor, 'rect', {x:5,y:70*num,rx:20,ry:20,fill:'red', width: 60, height: 60, stroke: "black", "stroke-width": 5, opacity: 0.5});
    var textNode = createOn(anchor, 'text', {x:25,y:80*num,fill:'#0f0', "font-family": 'Arial', "font-size": 40});
    textNode.textContent = "Menu "+num;
}