使用jQuery的SVG链接标记

在下面的示例中，我尝试动态地将链接标记添加到svg元素。使用jQuery的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; 
}

链接也更新

来源

2012-06-20 MALK

这可能是你缺少你的根SVG标记的一些命名空间（在的xmlns和xmlns：链接）不知道这是否会有所作为，但值得一试。

如果没有帮助，这里是一个简单的例子展示两个环节的工作：

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

它采用独特的ID为两个环节，所以也许这可能是值得一试的太！ :)

希望这有助于！

Andy。

更新

看来，当圈被删除，并在包装再次添加，jQuery的不能正确处理SVG元素。它看起来像jQuery不支持添加SVG元素到DOM不幸的。

这些所谓的问题的回答同样的问题：

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

来源

2012-06-20 11:06:31 Andy

感谢您的输入刘德华，但这些变化很遗憾没有运气。 – MALK

奇怪的是，那么为什么示例链接起作用，而您的示例链接不起作用，如果您更改标记，以便两个圆圈最初都有链接（即按照我们的按钮添加链接），那么它是否有效？我猜不是，这是标记的问题，不知怎的，这是绕着圆圈的行为。您在调试时还尝试过了什么？ – Andy

我注意到的唯一的另一件事是，使用一个对象元素链接到外部.svg文件，这是不同于你的内联的东西，可能这与差异有关（不建议你使用一个对象元素，我知道这不适合你的需求:) :) – Andy

使用jQuery的SVG链接标记

回答

相关问题