Untitled

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>ngAnimate causes error with ngClass on SVG with css transition</h1>
    <p>ngAnimate triggers an error on any svg element with a css transition on it like a hover effect.</p>
    <svgbug></svgbug>
    <p>Click on either square to change to red. The left rect fails with <code>Uncaught TypeError: Object #<SVGAnimatedString> has no method 'indexOf' </code></p></code></p>
  </body>

</html>

// Code goes here

angular.module('myapp', ['ngAnimate'])
.directive('svgbug', function(){
  return {
    restrict: 'E',
    template: '<svg width="300" height="100">' +
      '<g ng-click="isRed=!isRed">' +
      '<rect width="100" height="100" class="animated" ng-class="{red:isRed}"></rect>' +
      '<rect width="100" height="100" x="110" ng-class="{red:isRed}"></rect>' +
      '</g>' +
      '</svg>',
    link: function(scope, attr){
      scope.isRed = false;
    }
  }  
})

/* Styles go here */

rect { fill: black;}
rect.red {fill:red}
rect.animated:hover {fill: #aaa;}
rect.animated {transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;}