CODEWITHSUNDEEP
javascriptangularjssvg
Xiaojun Chen
Xiaojun Chen

Reputation: 1276

Binding svg attribute with Angular

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.

Upvotes: 9

Views: 10820

Answers (2)

curly_brackets
curly_brackets

Reputation: 5598

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

Upvotes: 30

ksed
ksed

Reputation: 365

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

Upvotes: 4

Related Questions