fix(jqLite): use get/setAttribute so that jqLite works on SVG nodes

jqLite previously used `elt.className` to add and remove classes from a DOM Node, but
because the className property is not writable on SVG elements, it doesn't work with
them. This patch replaces accesses to `className` with `get/setAttribute`.

`classList` was also considered as a solution, but because only IE10+ supports it, we
have to wait. :'(

The JqLiteAddClass/JQLiteRemoveClass methods are now also used directly by $animate
to work around the jQuery not being able to handle class modifications on SVG elements.

Closes #3858

1 files changed, 12 insertions, 0 deletions

diff --git a/test/ng/animateSpec.js b/test/ng/animateSpec.js
index 79115c1e..e982862a 100644
--- a/test/ng/animateSpec.js
+++ b/test/ng/animateSpec.js
@@ -40,6 +40,18 @@ describe("$animate", function() {
       expect(element).toBeHidden();
     }));
 
+    it("should add and remove classes on SVG elements", inject(function($animate) {
+      if (!window.SVGElement) return;
+      var svg = jqLite('<svg><rect></rect></svg>');
+      var rect = svg.children();
+      $animate.enabled(false);
+      expect(rect).toBeShown();
+      $animate.addClass(rect, 'ng-hide');
+      expect(rect).toBeHidden();
+      $animate.removeClass(rect, 'ng-hide');
+      expect(rect).not.toBeHidden();
+    }));
+
     it("should throw error on wrong selector", function() {
       module(function($animateProvider) {
         expect(function() {