在以下示例中,我尝试动态地将链接标记添加到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;
}
链接也已更新
答案 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?