From 5cad24322503afb8ab07f64a81522f788e34b7cf Mon Sep 17 00:00:00 2001
From: Sreenivasan K <sreeramu@gmail.com>
Date: Thu, 28 Apr 2016 11:04:08 +0530
Subject: [PATCH] Fix($animate) : svg element with classNameFilter animation
 fix.

---
 src/ngAnimate/animateCss.js   |  2 +-
 src/ngAnimate/animateQueue.js |  2 +-
 test/ngAnimate/animateSpec.js | 22 +++++++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
index 868411acb7ae..3f5663d424bc 100644
--- a/src/ngAnimate/animateCss.js
+++ b/src/ngAnimate/animateCss.js
@@ -892,7 +892,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
           $$jqLite.addClass(element, activeClasses);
 
           if (flags.recalculateTimingStyles) {
-            fullClassName = node.className + ' ' + preparationClasses;
+            fullClassName = node.getAttribute('class') + ' ' + preparationClasses;
             cacheKey = gcsHashFn(node, fullClassName);
 
             timings = computeTimings(node, fullClassName, cacheKey);
diff --git a/src/ngAnimate/animateQueue.js b/src/ngAnimate/animateQueue.js
index a384f6a1cc9d..c17dfdb89ce6 100644
--- a/src/ngAnimate/animateQueue.js
+++ b/src/ngAnimate/animateQueue.js
@@ -361,7 +361,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
         return runner;
       }
 
-      var className = [node.className, options.addClass, options.removeClass].join(' ');
+      var className = [node.getAttribute('class'), options.addClass, options.removeClass].join(' ');
       if (!isAnimatableClassName(className)) {
         close();
         return runner;
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index 6bd18d456b3f..39717eeddb0b 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -179,7 +179,7 @@ describe("animations", function() {
       });
     });
 
-    it('should animate only the specified CSS className matched within $animateProvider.classNameFilter', function() {
+    it('should animate only the specified CSS className matched within $animateProvider.classNameFilter for div', function() {
       module(function($animateProvider) {
         $animateProvider.classNameFilter(/only-allow-this-animation/);
       });
@@ -198,6 +198,26 @@ describe("animations", function() {
       });
     });
 
+    it('should animate only the specified CSS className matched within $animateProvider.classNameFilter for svg', function() {
+      module(function($animateProvider) {
+        $animateProvider.classNameFilter(/only-allow-this-animation-svg/);
+      });
+      inject(function($animate, $rootScope, $compile) {
+        var svgElement = $compile('<svg class="element"></svg>')($rootScope);
+        expect(svgElement).not.toHaveClass('only-allow-this-animation-svg');
+
+        $animate.enter(svgElement, parent);
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeFalsy();
+
+        svgElement.attr('class', 'element only-allow-this-animation-svg');
+
+        $animate.leave(svgElement, parent);
+        $rootScope.$digest();
+        expect(capturedAnimation).toBeTruthy();
+      });
+    });
+
     they('should not apply the provided options.$prop value unless it\'s a string or string-based array', ['addClass', 'removeClass'], function(prop) {
       inject(function($animate, $rootScope) {
         var startingCssClasses = element.attr('class') || '';