0
In diesem Beispiel wird der Fehler in der Konsole angezeigt: Error: <path> attribute d: Expected number, "M 100,{{$ctrl.test}} L…". angular.js:3505 Siehe diesen Fehler in der Browserkonsole (ich verwende letzten stabilen Chrome). Das SVG wird korrekt angezeigt.Fehler bei Verwendung von SVG in der Komponentenvorlage
'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 diesem Beispiel, ich versuche, ein anderes Attribut zu ändern. Kein Fehler. Das SVG wird auch korrekt angezeigt.
'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>Ist es ein Fehler oder ich kann die SVG in einer solchen Art und Weise verwenden? Wie behebe ich den Fehler?