Question

How do I create an SVG anchor through JavaScript? Please see relevant section and an example from spec. How do I convert this example to JavaScript (basically, how to dynamically generate the container element a so that when I click the ellipse, it navigates away.

<?xml version="1.0"?>
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.2" baseProfile="tiny"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <title>Example 17_01</title>
  <desc>A simple link on an ellipse.</desc>
  <rect x=".01" y=".01" width="4.98" height="2.98" 
        fill="none" stroke="blue"  stroke-width=".03"/>
  <a xlink:href="http://www.w3.org/">
    <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
             fill="red" />
  </a>
</svg>

Answer 1

Using my function below, it’s as easy as this:

// Find the first SVG element
var svg = document.getElementsByTagName('svg')[0];
var a = createOn(svg,'a',{'xlink:href':'http://www.w3.org/'});
createOn(a,'ellipse',{cx:2.5,cy:1.5,rx:1,ry:1,fill:'red'});

function createOn(root,name,attrs,text){
  var doc = root.ownerDocument,
      svg = root.ownerSVGElement || root; // In case the root _is_ the <svg>
  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);
}

If you already have the ellipse and want to wrap it, then create the ‘a’ element and:

// Get a reference to the ellipse however you like
var ellipse = document.getElementsByTagName('ellipse')[0];

// Put the anchor node immediately preceding the ellipse
ellipse.parentNode.insertBefore(a,ellipse);

// Move the ellipse to be a child of the anchor
a.appendChild(ellipse);