Question

[解决]

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

创建包含正方形
单击方格时，会向其添加一个类（用红色填充）
问题：该类已正确添加到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;
}

Answer 1

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

.selected {
    fill: #f00;
}

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

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

1 个答案: