4

在以下示例中，我尝试将链接标记动态添加到 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;
}

链接也更新了

4

1 回答 1

1

可能是您的根 SVG 标记（xmlns 和 xmlns:link）上缺少一些命名空间，不确定这是否会有所作为，但值得一试。

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

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

它对两个链接都使用了唯一的 ID，所以也许这也值得一试！:)

希望这可以帮助！

安迪。

更新

似乎当圆圈被删除并再次添加到包装中时，jQuery 无法正确处理 SVG 元素。不幸的是，jQuery 似乎不支持向 DOM 添加 SVG 元素。

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

jquery 的追加不适用于 svg 元素？ 使用 Javascript 创建 SVG 图形？

于 2012-06-20T11:06:31.443 回答