CODEWITHSUNDEEP
jquerysvg
MALK
MALK

Reputation: 393

SVG link tag with jQuery

In the following example, I attempt 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 dissapears.

Any ideas why this might be happening?

The reason I am attempting this, is I wish to have make custom http://www.addthis.com/ icons using SVG, and the element must be enclosed in an 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 is also updated

Upvotes: 4

Views: 1528

Answers (1)

Andy
Andy

Reputation: 2997

It might be that your missing some namespace on your root SVG tag (the xmlns and xmlns:link), not sure if that'll make a difference but worth a try.

If that doesn't help, here is a simple example which shows two links working:

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

It uses unique ID's for both of the links, so perhaps that might be worth a try too! :)

Hope this helps!

Andy.

Update

It seems that when the circle is removed and added again in the wrap, jQuery fails to handle the SVG element properly. It looks like jQuery doesn't support adding SVG elements to the DOM unfortunately.

These SO questions answer the same issue:

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

Upvotes: 1

Related Questions