Binding svg attribute with Angular

Question

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.

Answer 1

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"/>

Answer 2

To control the svg's line-transform attribute, you need to use the ng-attr-myAttr approach, where myAttr in this case is your svg line's x2 and transform attributes. For example, you could write this svg line as follows:

<line id="line1" x1="140" ng-attr-x2={{x2}} y1="10" y2="10" ng-attr-transform="{{rotation}}" />