Question

在以下示例中，我尝试动态地将链接标记添加到svg元素。

$('#button').click(function(){
    $('.svgClass').wrap('<a xlink:href="http://www.w3.org/" />');
});

在示例中，尽管语法完全相同，但动态添加链接的椭圆消失了。

为什么会发生这种情况的任何想法？

我尝试这个的原因是，我希望使用SVG制作自定义http://www.addthis.com/图标，并且元素必须包含在标记中。

还尝试使用纯JavaScript但没有运气：

function wrapElem( innerId, wrapType, wrapperId, wrapperUrl ){
    var innerElem = document.getElementById( innerId ),
    wrapper = document.createElement( wrapType );  
    wrapper.appendChild( innerElem.parentNode.replaceChild( wrapper, innerElem ) );
    wrapper.setAttribute('xml:id', wrapperId); 
    wrapper.setAttribute('xlink:href', wrapperUrl); 
    return wrapper;
}

链接也已更新

Answer 1

可能是您在根SVG标记上缺少一些命名空间（xmlns和xmlns：link），不确定这是否会产生影响但值得一试。

如果这没有帮助，这里有一个简单的例子，它显示了两个链接：

http://www.w3.org/2004/CDF/TestSuite/WICD_CDR_WP1/test-scalable-icon2.xhtml

它为这两个链接使用唯一的ID，所以也许值得一试！：）

希望这有帮助！

安迪。

<强>更新

似乎当圆圈被移除并在包装中再次添加时，jQuery无法正确处理SVG元素。看起来jQuery不支持遗憾地将SVG元素添加到DOM中。

这些SO问题回答了同样的问题：

jquery's append not working with svg element? Creating SVG graphics using Javascript?

带有jQuery的SVG链接标记

1 个答案: