Ken Webb 2011-03-04T03:47:49Z
I am able to use most jQuery syntax with SVG elements, with some exceptions where I use standard DOM calls, or DOM plus jQuery, instead. These particular DOM methods and properties seem to be well supported in the major browsers, plus SVG Web includes patches for several problem DOM methods and properties. The following table is not intended to be comprehensive.
|jQuery syntax||DOM and/or jQuery equivalent|
|.text(mySvgText)||.get(0).firstChild.nodeValue = mySvgText|
|var svg = $(document.getElementById('mySVGObject').contentDocument.getElementsByTagNameNS(svgns,'svg'))|
|this.attr('id', 'abc')||this.get(0).setAttribute('id', 'abc')|
Tooltip is a popular jQuery plugin, that allows you to easily add a tooltip to any HTML element. By making two changes to the Tooltip plugin (version 1.3), it will also work with SVG elements.
//return this.attr('href') || this.attr('src');
return this.get(0).getAttribute('href') || this.get(0).getAttribute('src');
I haven't yet tried any other jQuery plugins with SVG Web, but possibly these would also work with a few (or no) changes.
return to main page