如何在Angular 2中为内联svg添加样式

Question

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

我使用这种语法在angular2中包含SVG但不能为其设置样式。

CSS：

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

Answer 1

由于样式封装而发生这种情况。

您可以使用以下3个选项之一：

• 具有SVG的组件的“封装：ViewEncapsulation.None”。
• “/ deep /＃fill1”选择器，用于指定规则应该应用于子组件
• 您可以将SVG样式移动到全局样式。[s] css文件。

Answer 2

尝试使用像这样的

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

`