Geek Answers Handbook

JQuery with SVG document

jQuery is designed for use in HTML pages with JavaScript.

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

What problems can arise when using jQuery with SVG? Would it be preferable to embed such an SVG as an element in an HTML document?

Please note: I do not mean the jQuery SVG drawing library, which provides manipulation of the SVG element in an HTML document as a graphic port using jQuery syntax. I want to use jQuery selectors and event management on SVG elements, with the SVG root being inside the HTML or maybe not.

+6
source share
1 answer

Trying a selector seems to work, but other things don't. The idiom $( function() { } ) to initialize the page does not work because SVG passes the SVGLoad event to the top <svg> element. $('svg').bind('SVGLoad', function(){}) really works.

Dynamically adding items using .append puts them in the DOM so that they do not appear, at least in Firefox. Phantom elements remain invisible even after re-rendering the document, including an element dynamically added without jQuery. $().attr(key, value) may change the attribute, but not refresh the screen.

All this, unfortunately, has broken. Additional features work after they are embedded in an XHTML document. But such defects as above remain, and it is probably better to use a different structure. Maybe give jQuery SVG a different look ...

+2
source

More articles:


All Articles