JSFiddle - React, Tailwind, and code Playground

by mrnobody

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;
}