SVG link icon with jQuery

Question

In the following example, I am trying to dynamically add a link tag to an svg element.

http://lizziemalcolm.com/svgtest.html

$('#button').click(function(){ $('.svgClass').wrap('<a xlink:href="http://www.w3.org/" />'); }); 

In the example, although the syntax is exactly the same, the ellipse with the dynamically added link disappears.

Any ideas why this could be happening?

The reason I'm trying to do this is because I want to create custom http://www.addthis.com/ icons using SVG, and the element should be enclosed in a tag.

Also tried with pure javascript, but no luck:

 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; } 

Link

also updated

Answer 1

Perhaps your missing namespace in the root SVG tag (xmlns and xmlns: link) is not sure if this will matter, but it's worth a try.

If this does not help, here is a simple example that shows two working lines:

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

It uses a unique identifier for both links, so it might be worth a try too! :)

Hope this helps!

Andy.

Update

It seems that when the circle is removed and added back to the wrapper, jQuery does not properly handle the SVG element. It seems that jQuery does not support adding SVG elements to the DOM, unfortunately.

These SO questions answer the same problem:

Jquery application not working with svg element? Creating SVG graphics using Javascript?