javascript - 用 <a> 元素包装现有的内联 SVG <g> 元素

Question

我想包装一系列 <g>带有 <a> 的元素元素，因此它们是可标记的。我试过使用 jQuery 但遇到了命名空间问题，所以一直在寻找更普通的 JS 方法。 SVG 在 Illustrator 中创建并通过 AJAX 调用加载到页面中。然后我使用 jQuery 来绑定(bind)事件等。我知道我可以使用图像映射将它们添加到 Illustrator 中，但我想找到一种方法来以编程方式完成它。这就是我想要做的:

$('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 fiddle (与上面的代码相同的问题):http://jsfiddle.net/bigwigal/pqe3o93e/ .

Answer 1

如果您使用 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);

不确定这是否会使它成为可选项卡，但如果不是，你需要用 html 包装 <a>用 <svg> child 直接包裹一个<g>不会像你看到的那样呈现。 IE。你需要创建看起来像这样的东西... <foreignObject><a><svg><g></g></svg></a></foreignObject> <a>在哪里是一个html元素，其他是svg元素。