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.

BTW, it would help if you were more specific about which version of AngularJS you are using. I'm presuming that you are using Version 1. I'm also wondering if you really need to alter x2 since you are rotating the line. — ksed
– ksed, Commented Nov 7, 2016 at 21:44

curly_brackets · Accepted Answer · 2022-08-22 09:55:06Z

30

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

edited Aug 22, 2022 at 9:55

answered Oct 5, 2017 at 8:57

curly_brackets

5,60515 gold badges62 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shutsman Over a year ago

perfectly works in Angular 8! Thanks! I have used next: [attr.d]="gauge[65]"

Najam Us Saqib Over a year ago

how can i set stroke-dasharray attribute because it have 2 values. what i have tried is: [attr.stroke-dasharray]="circle.rev_percentage + ' ' + circle.rev_percentage - 100". its shoeing NaN;

curly_brackets Over a year ago

I believe that would be attr.strokeDasharray or attr.stroke.dasharray have you tried any of those? I guess this doesn't help that much, 2 years later :)

ksed · Accepted Answer · 2016-11-07 20:27:50Z

4

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

edited Nov 7, 2016 at 20:27

answered Nov 7, 2016 at 20:07

ksed

3751 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Binding svg attribute with Angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related