Question

我想用<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/。

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

不确定是否会使其成为可标记的，但如果不是，则您需要将<a>与<svg>子项包装在一起，直接包裹<g>赢了＆＃39 ;你已经看过了。即你需要创建一个看起来像这样的东西...... <foreignObject><a><svg><g></g></svg></a></foreignObject>其中<a>是一个html元素，其他的是svg元素。

用<a> element</a> </g>包装现有的内联SVG <g>元素

1 个答案: