4

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

MALK
  • 393
  • 1
  • 3
  • 15

1 Answers1

1

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?

Community
  • 1
  • 1
Andy
  • 2,977
  • 2
  • 39
  • 71
  • Thanks for your input Andy but no luck with these changes unfortunately. – MALK Jun 20 '12 at 12:10
  • Odd, there must be a reason then why the example link works and yours doesn't, if you change the markup so both circles have links initially (i.e. take our the button to add the link), does it work? I would guess not and it's an issue with the markup somehow over the action of wrapping the circle. What else have you tried while debugging? – Andy Jun 20 '12 at 12:19
  • The only other thing I notice is that the example using a object element to link to an external .svg file, which is different to your inline stuff, maybe that may have something to do with the difference (not suggesting you use an object element, I know that's not suitable for your needs) :) – Andy Jun 20 '12 at 12:21
  • Yes, it is the action of wrapping the element which is the problem. However, It need to be able to do this dynamically so it is sort of important. I have ammended the link to demonstrate. – MALK Jun 20 '12 at 12:40
  • Updated my answer again by the way! :) – Andy Jun 21 '12 at 09:58
  • Thanks Andy - I tried it with pure javascript too but to no avail. It's interesting though because the element still exists in the DOM. – MALK Jun 21 '12 at 10:21
  • Yeah, I think one of the links suggests that it's the fact that we're adding an SVGElement to the HTML DOM, not the SVG DOM that's the issue. It suggests changing your page from HTML5 to XHTML (I guess they must then share the same DOM or something). Have you tried changing your page to XHTML? – Andy Jun 21 '12 at 10:49
  • For reference I also tried using this jquery SVG interaction plugin - http://keith-wood.name/svg.html – MALK Jun 24 '12 at 17:15