Question

我正在努力学习一个简单的SVG图像，我尝试更新两个矩形的颜色。在Chrome中他们得到了更新，在IE（10）中，反应角度只是黑色！

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

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

我的控制器：

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/

Answer 2

您必须使用angularjs指令“ng-style”：

ng-style="{fill:startColor,fillOpacity:1}"

https://docs.angularjs.org/api/ng/directive/ngStyle

Angular SVG操作在IE10中不起作用

2 个答案: