使用JavaScript在SVG的anchor元素内插入rect元素失效问题排查

嘿，这个问题我太熟悉了！你代码失效的核心原因是：你创建的是HTML的<a>标签，而非SVG命名空间下的锚点元素。

SVG是基于XML的图形标准，所有SVG专属元素（包括<a>锚点）都必须通过http://www.w3.org/2000/svg命名空间来创建。你用document.createElement('a')生成的是普通HTML的<a>标签，SVG容器根本不把它当作能承载SVG图形的有效容器，所以里面的<rect>自然不会被渲染出来。

修复后的代码 #

只需要修改创建<a>元素的那一行，改用createElementNS方法指定SVG命名空间：

console.log("in") // make a simple rectangle
var newRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
newRect.setAttribute("id", "rect604-1");
newRect.setAttribute("x", "172.39232");
newRect.setAttribute("y", "63.95792");
newRect.setAttribute("width", "33.816833");
newRect.setAttribute("height", "24.259901");
newRect.setAttribute("fill", "#00ff00");
newRect.setAttribute("opacity", "0.66");
newRect.setAttribute("fill-opacity", "1");
newRect.setAttribute("fill-rule", "evenodd");
newRect.setAttribute("stroke-width", "0.264583");

// 关键修改：使用SVG命名空间创建锚点元素
var aTag = document.createElementNS("http://www.w3.org/2000/svg", "a");
aTag.setAttribute('href', "test.html");
// 如果需要在新窗口打开链接，可添加target属性
// aTag.setAttribute('target', "_blank");

var svg = document.getElementById("svg12");
console.log(svg)

aTag.appendChild(newRect);
svg.appendChild(aTag);

额外兼容提示 #

如果需要兼容一些旧版浏览器（比如IE），SVG的锚点元素需要使用xlink:href属性而非href，这时候需要同时指定XLink命名空间：

// 添加XLink命名空间的href属性
aTag.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "test.html");

这样修改后，你的可点击矩形就能正常显示并响应点击跳转啦！

内容的提问来源于stack exchange，提问作者jana