Angularjs SVG指令：已添加但未应用css类

[已解决]

我使用angular 1.3-beta创建了一个简单的SVG指令，该指令的特征是“type:'SVG'”。代码很简单（请参阅Plunker-更新解决方案）：

创建包含正方形的SVG元素

单击正方形时，将向其添加一个类（用红色填充）

问题：该类已正确添加到SVG square元素中，但该类被忽略，并且square仍为黑色

以下是js部分：

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");
                });
            }
        };
    });

---

您的CSS文件包含错误。您在不应有填充颜色的引号中指定了填充颜色。用以下代码替换CSS，您的示例将按预期工作：

.selected {
    fill: #f00;
}

还要注意，如果使用jQuery作为AngularJS后端，那么添加CSS类可能是不可能的（）

.selected {
    fill: #f00;
}