How to add style to inline svg in Angular 2

Question

 <div class="svg_ahu card_content" align="start" [inlineSVG]="'/assets/ahu.svg'"></div>

I used this syntax to include SVG in angular2 but not able to style it.

CSS:

 #fill1 {
  animation: fill1 .1s ease infinite;
}    

Answer 1

It's happening due to styles encapsulation.

You can use one of 3 options:

• "encapsulation: ViewEncapsulation.None" for the component with SVG.
• "/deep/ #fill1" selector, to specify that rules should apply to a child component
• you can move SVG styles to the global styles.[s]css file.

Answer 2

try using like this

<div class="svg_ahu card_content" align="start" [attr.inlineSVG]="'/assets/ahu.svg'"></div>

`