SVG directive: css class added but not applied

Question

[SOLVED]

I created a simple SVG directive using angular 1.3-beta which features a "type: 'svg'" for directive. The code is straightforward (see Plunker http://plnkr.co/edit/vgElXdWXvfH0faH0qKHk?p=preview - updated with solution):

1. Create a SVG element containing a square
2. when the square is clicked, a class is added to it (fill with red)
3. ISSUE: the class is correctly added to the SVG square element but it is ignored and the square remains black.

Here is the js part:

var app = angular.module('app', [])

    .directive('svgDirective', function () {
        return {
            template: '<svg xmlns:xlink="http://www.w3.org/1999/xlink"> <g ng-transclude> </g> </svg>',
            transclude: true,
            type: 'svg',
            replace: true
        };
    })

    .directive('svgSquare', function() {
        return {
            template: '<rect width=100 height=100></rect>',
            type: 'svg',
            replace: true,
            link: function (scope, element, attrs) {
                element.on('click', function () {
                    element.addClass("selected");
                });
            }
        };
    });

and the CSS:

.selected {
    fill: '#f00'; --> SOLUTION: no quotation mark: fill: #f00;
}

Answer 1

Your CSS file contains an error. You specified the fill color in quotation marks where there should be none. Replace the CSS with the following code and your example is working as intended:

.selected {
    fill: #f00;
}

Also note that if you use jQuery as your AngularJS backend, adding CSS classes might be impossible (see this question)