<a> zu SVG Pfad Hinzufügen von Objekten programmatisch

Question

Ich habe ein Problem, die JavaScript, um mit Ankern-Tags um ein Pfadobjekt innerhalb SVG zu wickeln. So, hier ist die SVG Ich habe (Version verkürzt, mit nur zwei Pfade) mit ids:

"striatum1" und "striatum2"

Bei Pfad mit der ID "striatum1" Ich habe den Link hardoded , im Falle eines Pfades mit der ID "striatum2" möchte ich den Link programmgesteuert generieren.

So zuerst, nehmen Sie bitte einen Blick auf die 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> 

ich mit dem Befehl des SVG in meine HTML-Datei laden:

<object id="brain" type="image/svg+xml" data="{% static "img/brain.svg" %}">Your browser does not support SVG</object> 

Und jetzt Ich benutze JavaScript und DOM-Operationen, um den Pfad einfach mit dem Anker zu verbinden:

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

Als Ergebnis erhalte ich die folgende Formatierung von DOM:

Aber die Sache ist, dass nur der hartcodierte Link funktioniert - wenn ich die Maus über bewegen striatum1 funktioniert alles perfetly und Link ist in Ordnung. Im Falle von striatum2 modifiziert mit dem JS-Code - nicht. Was ist los mit dir?!

Prost!

Answer 1

Das href-Attribut befindet sich nicht im SVG-Namespace, sondern im xlink-Namespace. Das Ziel befindet sich auch im NULL-Namespace. So

link.setAttributeNS(svgNS, 'xlink:href', '/?q=striatum') 
link.setAttributeNS(svgNS, 'target', '_top') 

sollte

link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '/?q=striatum') 
link.setAttribute('target', '_top')