These last couple of weeks I've been working a lot with Snap.svg.
Snap.svg is a revamped version of Raphael which
only supports modern browsers, i.e. those who fully support SVG.
This allows Snap.svg to support all of SVG's cool features such as masking, clipping, groups, ...
Unfortunately there are no built-in methods to hide or show an element, or
to add and/or remove classes from a given element and apply CSS transitions and animations.
However it is very easy to extend Snap.svg.
I extended the Element prototype like so:
var s = Snap(450, 450);
var rect = s.rect(150, 150, 75, 75);
// show rect
// hide rect
// toggle rect
// add classes to rect
rect.addClass('class1 class2 class3');
// remove classes from rect
rect.removeClass('class1 class2 class3');
// toggle classes
After doing a little more research, it turns out that classList on SVG Elements
is not supported in IE, Android Browser and Safari.
I updated addClass, removeClass and toggleClass for full browser support.
(all browsers that support ECMAScript 5).
Dmitry has recently added The addClass, removeClass and hasClass functions in Snap.svg's dev branch. So these new features should be available in the next stable release, making this plugin obsolete and irrelevant :).
As of version 0.3.0, the addClass, removeClass, toggleClass and hasClass functions have been added to Snap.svg.