title: Adding <a> to SVG path objects programmatically
body: <p>I have a problem using the JavaScript in order to wrap <strong>anchor tags</strong> around a <strong>path object within SVG</strong>. So, here is the SVG I have (shortened version, with just two paths) with ids:</p>
  
  <p>"striatum1" and "striatum2"</p>
  
  <p><strong>In case of path with id "striatum1" I have hardoded the link, in case of path with id "striatum2" I want to generate the link programmatically.</strong></p>
  
  <p>So first, please take a look at the SVG (<strong>brain.svg</strong>):</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:cc="http://creativecommons.org/ns#"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="950"
  height="481"
  id="svg3194"
  version="1.1"
  inkscape:version="0.48.4 r"
  sodipodi:docname="100883818.svg"&gt;
  &lt;metadata id="metadata3363"&gt;
  &lt;rdf:RDF&gt;
  &lt;cc:Work rdf:about=""&gt;
  &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt;
  &lt;dc:type
  rdf:resource="http://purl.org/dc/dcmitype/StillImage" /&gt;
  &lt;/cc:Work&gt;
  &lt;/rdf:RDF&gt;
  &lt;/metadata&gt;
  &lt;defs id="defs3361" /&gt;
  &lt;sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1137" id="namedview3359" showgrid="false" inkscape:zoom="1.8831579" inkscape:cx="398.09195" inkscape:cy="263.64271" inkscape:window-x="-8" inkscape:window-y="-8"  inkscape:window-maximized="1" inkscape:current-layer="svg3194" /&gt;
  &lt;g sub_image_id="100883818" graphic_group_label="Atlas - Adult Mouse" graphic_group_label_id="28" parent_id="" order="1" id="1140353" transform="scale(0.0625,0.0625)"&gt;
  
  &lt;a xlink:href="/?q=striatum" target="_top"&gt;
  &lt;path inkscape:connector-curvature="0"
   style="fill:#98d6f9;stroke:#000000"
   d="m 6450.817,4057.065 c 62.742,-49.185 48.652,-35.028 93.18,-65.73 21.995,-49.697 29.535,-105.523 60.796,-152.036 35.89,-53.387 63.862,-130.156 95.818,-158.385 l 64.327,-73.409 c -16.829,19.627 -40.647,30.685 -65.304,15.701 -65.548,-39.841 -63.439,-156.479 -60.75,-222.268 3.438,-83.97 20.396,-166.877 22.066,-250.95 3.576,-180.159 -142.151,-283.043 -200.621,-437.694 -247.442,-58.702 -540.664,91.151 -756.477,194.333 -154.688,73.939 -302.833,160.731 -447.445,252.615 -98.278,62.458 -197.208,124.479 -293.458,190.056 -135.122,92.071 -267.929,215.585 -284.417,387.04 -13.93,144.786 43.482,270.65 77.792,410.08 8.374,34.054 23.858,71.438 29.169,105.309 4.578,29.157 -4.553,58.079 -1.556,87.229 11.616,112.646 124.011,235.289 206.779,303.917 172.559,143.079 403.368,230.026 619.417,278.058 206.893,45.991 406.382,40.79 615.703,6.558 37.975,-6.211 82.63,-12.683 101.659,-50.613 2.81,-5.563 4.96,-11.571 6.565,-17.9 10.182,-39.837 -0.969,-92.445 -7.689,-128.816 -15.159,-81.979 -30.368,-163.985 -41.136,-246.686 -8.659,-66.452 -30.514,-155.697 -0.179,-219.066 11.667,-24.386 35.729,-49.926 56.605,-72.183 7.257,-13.949 50.144,-88.912 109.156,-135.16 z"
   structure_id="672"
   order="77"
   parent_id="1140353"
   id="striatum1" /&gt;
  &lt;/a&gt;
  
  &lt;path inkscape:connector-curvature="0"
  style="fill:#80cdf8;stroke:#000000"
  d="m 5173.182,6221.851 c 132.824,90.865 270.715,177.572 419.415,240.006 147.047,61.736 295.364,-158.492 332.671,-273.461 24.274,-74.802 30.083,-187.555 17.334,-265.538 -11.461,-70.103 -73.189,-113.674 -87.298,-181.76 -24.673,-119.106 68.905,-195.705 130.682,-283.618 59.423,-84.544 106.733,-174.709 139.74,-272.653 15.974,-47.444 18.197,-81.136 30.025,-129.818 27.646,-113.73 -96.478,-59.5 -154.769,-58.152 -121.616,2.807 -292.09,-13.688 -410.911,-40.109 -216.033,-48.027 -458.067,-146.717 -630.634,-289.801 -33.414,-27.703 -66.607,-61.569 -94.727,-96.787 -20.502,-25.688 -51.424,-94.58 -92.755,-83.254 -30.783,8.427 -33.992,72.347 -36.362,96.096 -5.604,55.879 -5.018,112.293 -10.117,168.254 -7.795,85.29 -12.65,162.36 9.392,246.131 20.764,78.884 63.203,148.9 103.866,218.778 46.74,80.325 74.419,172.437 77.262,265.493 3.095,101.113 -30.929,188.199 -58.763,283.345 -60.946,208.389 164.315,352.779 308.202,451.542 2.574,1.767 5.164,3.538 7.747,5.306 z"
  structure_id="56"
  order="78"
  parent_id="1140353"
  id="striatum2" /&gt;
  
  &lt;/g&gt;
  &lt;g inkscape:groupmode="layer" id="layer1" inkscape:label="Thalamus" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I load the SVG into my HTML file with command:</p>
  
  <pre><code>&lt;object id="brain" type="image/svg+xml" data="{% static "img/brain.svg" %}"&gt;Your browser does not support SVG&lt;/object&gt;
  </code></pre>
  
  <p>And now I use JavaScript and DOM operations to simply wrap path with anchor, like this:</p>
  
  <pre><code>var brain = document.getElementById('brain');
  var inside_brain = brain.contentDocument;
  var svg = inside_brain.getElementById('svg3194');
  var svgNS = svg.getAttribute('xmlns');
  
  // I need some part of an SVG image
  var striatum = inside_brain.getElementById('striatum2');
  var parent_id = striatum.getAttribute('parent_id');
  var parent = inside_brain.getElementById(parent_id);
  
  // let's make a link
  var link = document.createElementNS(svgNS, "a");
  link.setAttributeNS(svgNS, 'xlink:href', '/?q=striatum')
  link.setAttributeNS(svgNS, 'target', '_top')
  
  // and now just attaching the link with SVG path inside to &lt;g&gt; within &lt;svg&gt; tags
  parent.appendChild(link);
  link.appendChild(striatum);
  </code></pre>
  
  <p>As a result I get the following formatting of DOM:
  <img src="https://i.stack.imgur.com/J8NFo.png" alt=" screenshot of DOM after the JavaScript executed "></p>
  
  <p><strong>But the thing is that only the hardcoded link works - if I move mouse over striatum1 everything works perfetly, and link is OK. In case of striatum2 modified using the JS code - not. What's wrong?!</strong></p>
  
  <p>Cheers!</p>