<!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;}