Binding svg attribute with Angular
angularjs, javascript, svg
Solution
I know this is quite old, but stumbled upon this issue once again, so thought I would provide the correct approach. In newer Angular you need to use this syntax:
<line id="line1" [attr.x1]="140" [attr.x2]="x2" [attr.y1]="10" [attr.y2]="10" [attr.transform]="rotate"/>
Problem
I have some element in my SVG like: ``` <div ng-app="myApp" ng-controller="myCtrl"> ... <svg ...> <line id="line1" x1="140" x2={{x2}} y1="10" y2="10" transform="{{rotate}}"/> ... </svg> </div> ``` where `x2` is the end coordinate and rotate is in form `rotate(...,...,...)`, which are all string type. This line element does not change when the value changes. Neither does it rotate nor show the `x2` attribute correctly. By the way, the date binding is programmed correctly, as I also use `{{x2}}` in a `<p>` tag and it is shown correctly.