Svg invalid value for <path>

Question

I have a problem with entering SVG path d = "". I do not understand this error message.

HTML:

<svg style="height:300px"> <path d="{{ room.coordinate }}" ng-repeat="room in rooms" fill="blue" stroke="black" stroke-width="2"></path> </svg> 

SVG Path: M 150 0 L75 200 L225 200 Z

Error:

 Error: Invalid value for <path> attribute d="{{ room.coordinate }}" jquery.min.js:3 Error: Invalid value for <path> attribute d="{{ room.coordinate }}" angular.min.js:23 

Answer 1

This relates to this question: D3 Integration with Angular: "Error: Invalid value for <rect> attribute x"

And this problem: https://github.com/angular/angular.js/pull/2061

For each <svg> attribute, instead of <name>={{<evaluated value>}} , use ng-attr-<name>={{<evaluated value>}} .