javascript - Angular SVG 操作在 IE10 中不起作用

Question

我正在努力处理一个简单的 SVG 图像，我尝试更新两个矩形的颜色。在 Chrome 中，它们会更新，在 IE(10) 中， react Angular 只是黑色!

在我的 Controller 中，我通过 $scope.cvrColor=[随机生成的颜色代码] 设置颜色

我制作了这个简单的示例来说明我的问题:

http://jsfiddle.net/mvg123/td7py264/

我的 Controller :

function testController($scope, $timeout) {
        var test = updateSvg();

    function updateSvg() {

        $scope.startColor = getRandomColor();
        $scope.cvrColor = getRandomColor();


        $timeout(updateSvg, 1000);
    };

    function getRandomColor() {

        var number = Math.floor(Math.random() * 11);
        var color = "";
        switch (true) {
            case (number < 3):
                color = "#808000";
                break;
            case (number > 3 && number < 8):
                color = "#666666";
                break;
            case (number > 8 && number < 12):
                color = "#ff0000";
                break;
            default: color = "#ffff00";
        }
        return color;
    }

}

有什么提示吗？

/最诚挚的问候

Answer 1

虽然您的示例应该有效，但我发现在类或样式中使用表达式有些不可靠。最好使用 ng-class 和 ng-style。所以在你的情况下你可以写:

<rect ng-style="{fill:startColor, fillOpacity:1}" ... />

http://jsfiddle.net/c5ozbv52/