Question

我有svg，我想更改颜色，这是我的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"/>

我尝试更改样式：

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

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

我在萤火虫中找不到我的颜色吗？感谢您的答复

Answer 1

在样式标签中省略fill属性，而使用[style.fill]属性绑定，例如

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

然后，您就可以像这样通过编程方式从组件中分配颜色

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

Here's a working example!

如何应用样式SVG插值角度

1 个答案: