带有 jQuery 的 SVG 链接标签答案

【问题标题】：SVG link tag with jQuery带有 jQuery 的 SVG 链接标签
【发布时间】：2012-06-21 18:23:21
【问题描述】：

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

链接也更新了

【问题讨论】：

标签： jquery svg

【解决方案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?

【讨论】：

感谢您的意见，安迪，但不幸的是，这些更改没有成功。
奇怪，如果您更改标记以使两个圆圈最初都有链接（即点击我们的按钮添加链接），那么为什么示例链接有效而您的链接无效，肯定是有原因的，它有效吗？我猜不是，这是标记在环绕圆圈的动作上的问题。您在调试时还尝试过什么？
我注意到的唯一另一件事是使用对象元素链接到外部 .svg 文件的示例，这与您的内联内容不同，也许这可能与差异有关（不建议您使用对象元素，我知道这不适合您的需求）:)
是的，问题在于包装元素的动作。但是，它需要能够动态地执行此操作，因此它很重要。我已经修改了演示链接。
顺便又更新了我的答案！ :)