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

【问题标题】：SVG directive: css class added but not appliedSVG 指令：css 类已添加但未应用
【发布时间】：2014-08-01 20:13:26
【问题描述】：

[已解决]

我使用 angular 1.3-beta 创建了一个简单的 SVG 指令，该指令具有“type: 'svg'” 指令。代码很简单（请参阅 Plunker http://plnkr.co/edit/vgElXdWXvfH0faH0qKHk?p=preview - 已更新解决方案）：

创建一个包含正方形的 SVG 元素
点击方块时，会添加一个类（用红色填充）
问题：该类已正确添加到 SVG 方形元素，但它被忽略并且方形保持黑色。

这里是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：

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

【问题讨论】：

标签： angularjs svg angularjs-directive

【解决方案1】：

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

.selected {
    fill: #f00;
}

另外请注意，如果您使用 jQuery 作为 AngularJS 后端，则可能无法添加 CSS 类 (see this question)

【讨论】：