In this example, the error appears in the console: Error: <path> attribute d: Expected number, "M 100,{{$ctrl.test}} L…". angular.js:3505
See this error in the browser console (I use last stable Chrome).
The SVG is displayed correctly.
'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);<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>In this example, I'm trying to change another attribute. No error. The SVG is displayed correctly too.
'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);<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>Is it a bug or I can not use the SVG in such a way? How do I fix the error?
This is because there are restrictions on the values that are considered valid for certain attributes. This is why Angular has
ngAttr(docs). You need to change your code like this: