带有jQuery的SVG链接标记

时间:2012-06-20 10:41:40

标签: jquery svg

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

http://lizziemalcolm.com/svgtest.html

$('#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;
}

链接也已更新

1 个答案:

答案 0 :(得分: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?