WebEdition SVG Web and jQuery

Ken Webb 2011-03-04T03:47:49Z

When I googled for <em>jQuery "SVG Web"</em>, I found little help in figuring out how to use the popular jQuery JavaScript library, with the SVG Web library. The concensus seems to be that the two libraries can't be made to work together. However, I have found that the two can work well together, with certain limitations. I am now able to run a fairly sophisticated SVG simulation that includes heavy use of jQuery, on all major browsers I've tested including Firefox, Google Chrome, Opera, Safari, and Internet Explorer 8. My simulation app uses jQuery 1.5, and the SVG Web "Lurker Above" release. My SVG content is in a separate .svg file, referenced from an HTML object tag.

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')[0])
$('svg').children('g') svg.children('g')
.find('rect') .children().children('rect')
.append(mySvgShape) .get(0).appendChild(mySvgShape)
$(mySvgNode).remove() myParentNode.get(0).removeChild(mySvgNode)
$(this).removeAttr("title") $(this).get(0).removeAttribute("title")
this.attr('href') this.get(0).getAttribute('href')
this.attr('id', 'abc') this.get(0).setAttribute('id', 'abc')
.live() .bind()

jQuery Tooltip plugin

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.

first change:

//$(this).removeAttr("title");

$(this).get(0).removeAttribute("title");

second change:

//return this.attr('href') || this.attr('src');

return this.get(0).getAttribute('href') || this.get(0).getAttribute('src');

Other jQuery plugins

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