javascript - 用<a>元素包装现有的嵌入式SVG <g>元素

我想用<g>元素包装一系列<a>元素，使它们易于阅读。我尝试使用jQuery，但遇到了名称空间问题，因此一直在寻找一种更通用的JS方法。 SVG是在Illustrator中创建的，并通过AJAX调用加载到页面中。然后，我使用jQuery绑定事件等。我知道可以在Illustrator中使用Image Map添加它们，但我想找到一种方法以编程方式完成它。这是我想做的：

$('g').wrap(function() {
    var anchor = document.createElementNS('http://www.w3.org/2000/svg', 'a');
    anchor.setAttribute('xlink:href', 'javascript:void(0);');

    return anchor;
});

这会将其放入DOM中，但不会呈现，因此我仍然假设存在名称空间问题。我很有可能做错了明显的事情，因此，非常感谢您的帮助！谢谢。

这是一个纯JS小提琴（与上面的代码相同的问题）：http://jsfiddle.net/bigwigal/pqe3o93e/。

最佳答案

如果您使用SVG <a>元素，则将显示您的内容并且链接将起作用。

var g = document.getElementById('target');

var parent = g.parentNode;
var a = document.createElementNS('http://www.w3.org/2000/svg', 'a');

a.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'javascript:void(0);');
a.appendChild(g);

parent.appendChild(a);

不知道这是否会使它成为可选项，但如果不能，则需要用一个<a>子项将其包裹在html <svg>中，因为直接包裹<g>不会像您看到的那样呈现。即您需要创建类似于以下内容的内容... <foreignObject><a><svg><g></g></svg></a></foreignObject>其中<a>是html元素，其他元素是svg元素。