I have a problem using the JavaScript in order to wrap anchor tags around a path object within SVG. So, here is the SVG I have (shortened version, with just two paths) with ids:
"striatum1" and "striatum2"
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.
So first, please take a look at the SVG (brain.svg):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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">
<metadata id="metadata3363">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs3361" />
<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" />
<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)">
<a xlink:href="/?q=striatum" target="_top">
<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" />
</a>
<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" />
</g>
<g inkscape:groupmode="layer" id="layer1" inkscape:label="Thalamus" />
</svg>
I load the SVG into my HTML file with command:
<object id="brain" type="image/svg+xml" data="{% static "img/brain.svg" %}">Your browser does not support SVG</object>
And now I use JavaScript and DOM operations to simply wrap path with anchor, like this:
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 <g> within <svg> tags
parent.appendChild(link);
link.appendChild(striatum);
As a result I get the following formatting of DOM:
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?!
Cheers!
