添加<a> to SVG path objects programmatically</a>

Question

我在使用JavaScript时遇到问题，以便在SVG 中的路径对象周围包装锚标记。所以，这是我有的SVG（缩短版本，只有两个路径）和id：

“striatum1”和“striatum2”

如果路径ID为“striatum1”，我已经对链接进行了硬编码，如果路径ID为“striatum2”，我想以编程方式生成链接。

首先，请看一下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>

我使用命令

将SVG加载到我的HTML文件中

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

现在我使用JavaScript和DOM操作来简单地用锚包装路径，如下所示：

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

结果我获得了以下DOM格式：

但问题是只有硬编码链接有效 - 如果我将鼠标移到striatum1上，一切都很有效，链接就可以了。在使用JS代码修改striatum2的情况下 - 不是。怎么了？！

干杯！

Answer 1

href属性不在SVG名称空间中，它位于xlink名称空间中。目标也在null命名空间中。所以

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

应该是

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