CODEWITHSUNDEEP
angularstyles
wtimi
wtimi

Reputation: 161

how apply style svg interpolation angular

I have à svg and I would like change color this is my svg:

 <path style="fill-rule:evenodd;clip-rule:evenodd;fill:'{{color}}';" d="M45.126,13.506c-0.842-0.269-1.038-0.587-0.807-1.313
   c0.362-1.135,2.076-2.359,3.256-2.351c0.631,0.005,1.039,0.309,0.999,0.916c-0.039,0.586-0.123,1.261-0.441,1.722
   c-1.168,1.696-2.778,2.847-4.802,3.323c-0.341,0.08-1.036-0.058-1.072-0.211c-0.131-0.558,0.45-0.56,0.816-0.736
   c0.725-0.349,1.429-0.742,2.143-1.117C45.187,13.662,45.156,13.584,45.126,13.506z"/>

I try change style:

  color="";



  ngOnInit() {
      this.color="#222222";
  }

}
style="fill-rule:evenodd;clip-rule:evenodd;fill:{{color}},"

I have not find in firebug my color ? thank's for reply

Upvotes: 0

Views: 1113

Answers (1)

Daniel B
Daniel B

Reputation: 8879

Omit the fill property in your style tag and use the [style.fill] property binding instead like

<path style="fill-rule:evenodd;clip-rule:evenodd;" [style.fill]="color" d="M45.126,13.506c-0.842-0.269-1.038-0.587-0.807-1.313
   c0.362-1.135,2.076-2.359,3.256-2.351c0.631,0.005,1.039,0.309,0.999,0.916c-0.039,0.586-0.123,1.261-0.441,1.722
   c-1.168,1.696-2.778,2.847-4.802,3.323c-0.341,0.08-1.036-0.058-1.072-0.211c-0.131-0.558,0.45-0.56,0.816-0.736
   c0.725-0.349,1.429-0.742,2.143-1.117C45.187,13.662,45.156,13.584,45.126,13.506z"/>

Then you can assign the color programmatically from your component just like

  ngOnInit() {
    this.color = '#2523E2';
  }

Here's a working example!

Upvotes: 5

Related Questions