Question

在此示例中，错误显示在控制台中：Error: <path> attribute d: Expected number, "M 100,{{$ctrl.test}} L…". angular.js:3505 在浏览器控制台中看到此错误（我使用上一个稳定的Chrome）。 SVG正确显示。

＆＃13;

'use strict';

var MyExampleTemplate = {
    template:   '<svg width="200" height="180">' +
                    '<path stroke="orange" stroke-width="10" fill="gold" ' +
                        'd="M 100,{{$ctrl.test}} L 180,160 ' +
                        'L 20,160 z"/>' +
                '</svg>',
    controller: MyExampleController
};

function MyExampleController() {
    var vm = this;

    vm.test = 0;
    vm.$onInit = init;
    console.log('Ctrl: %s', vm.test);

    function init() {
        vm.test = 20;
        console.log('Init: %s', vm.test);
    }
}

angular
    .module('app', [])
    .component('myExample', MyExampleTemplate);

＆＃13;

<body ng-app="app">
    <my-example></my-example>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
</body>

＆＃13;

在此示例中，我尝试更改其他属性。没错。 SVG也正确显示。

＆＃13;

'use strict';

var MyExampleTemplate = {
    template:   '<svg width="200" height="180">' +
                    '<path stroke="orange" stroke-width="{{$ctrl.test}}0" fill="gold" ' +
                        'd="M 100,20 L 180,160 ' +
                        'L 20,160 z"/>' +
                '</svg>',
    controller: MyExampleController
};

function MyExampleController() {
    var vm = this;

    vm.test = 0;
    vm.$onInit = init;
    console.log('Ctrl: %s', vm.test);

    function init() {
        vm.test = 1;
        console.log('Init: %s', vm.test);
    }
}

angular
    .module('app', [])
    .component('myExample', MyExampleTemplate);

＆＃13;

<body ng-app="app">
    <my-example></my-example>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
</body>

＆＃13;

这是一个错误还是我不能以这种方式使用SVG？如何修复错误？

Answer 1

这是因为对某些属性有效的值存在限制。这就是Angular ngAttr（docs）的原因。您需要像这样更改代码：

<path ... ng-attr-d="M 100,{{$ctrl.test}} L 180,160 L 20,160 z" />

在组件模板中使用SVG时出错

1 个答案: