6

jQuery is designed to be used in HTML pages with JavaScript.

SVG uses the same DOM Level 2 as HTML but is XML-based and specifies ECMAScript.

What problems could result from using jQuery with SVG? Would it be preferable to embed such SVG as an element in an HTML document?

Note, I'm not referring to the "jQuery SVG" drawing library which provides for manipulation of an SVG element in an HTML document as a graphics port using jQuery syntax. What I want is to use jQuery selectors and event management on SVG elements, with the SVG root maybe being inside HTML or maybe not.

Potatoswatter
  • 134,909
  • 25
  • 265
  • 421
  • Re: the confusion over javascript vs ecmascript, see e.g http://stackoverflow.com/questions/912479/what-is-the-difference-between-javascript-and-ecmascript. – Erik Dahlström Dec 19 '12 at 09:29
  • A possible duplicate: http://stackoverflow.com/questions/2294801/jquery-under-svg. In any case why not just try D3.js instead? D3 has both easy event bindings and selectors. Especially since you don't seem too concerned with browsers that don't support SVG. – Erik Dahlström Dec 19 '12 at 09:32

1 Answers1

2

Trying it out, selectors seem to work but other things don't. The $( function() { } ) idiom to initialize the page doesn't work because SVG only passes an SVGLoad event to the top <svg> element. $('svg').bind('SVGLoad', function(){}) does work, though.

Dynamically adding elements with .append puts them in the DOM such that they don't get rendered, at least on Firefox. The phantom elements remain invisible even after the document is re-rendered including an element dynamically added without jQuery. $().attr(key, value) may change an attribute but not update the onscreen display.

It all seems unfortunately broken. More features work once it's embedded in an XHTML document. But defects such as the above remain and it's probably better to use another framework. Maybe give jQuery SVG another look…

Potatoswatter
  • 134,909
  • 25
  • 265
  • 421