Angular：嵌入，设置SVG元素的颜色

Question

我有一个 component.html 可以嵌入我的 svg 组件：

<masterflex-sidebar>
    <masterflex-logo sidebar-logo color="white">

    </masterflex-logo>
</masterflex-sidebar>

我的logo.ts 文件：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'masterflex-logo',
  templateUrl: './masterflex.component.html',
  styleUrls: ['./masterflex.component.scss']
})
export class MasterflexComponent implements OnInit {

  @Input() color:string

  constructor() { }

  ngOnInit() {
  }

}

我的 svg 组件（部分）：

<svg 
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px"
    viewBox="0 0 237.4 35.9"
    height="35.9"
    width="237.4"
    xml:space="preserve" *ngIf="color">

我希望能够将我的 svg 组件的颜色更改为我想要的任何颜色（在我的第一个组件中使用 color="white" 设置）并将该颜色应用于我的 svg。有没有办法将该颜色属性传递给 scss 样式？

Answer 1

SVG 元素具有stroke 和fill 颜色。您可以为每一个设置相应的元素或样式属性：

<svg [attr.stroke]="color" ... >
<svg [style.stroke]="color" ... >
<svg [attr.fill]="color" ... >
<svg [style.fill]="color" ... >

组件的color输入属性必须在父组件中设置：

<my-svg-component [color]="myCustomColor" ...>

您可以尝试this stackblitz中的代码。请注意，如果 SVG 元素内的形状和文本元素设置了自己的 stroke 或 fill 颜色，这些将覆盖在 SVG 元素级别设置的颜色。

Answer 2

尝试这样做，

<svg 
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px"
    viewBox="0 0 237.4 35.9"
    height="35.9"
    width="237.4"
    xml:space="preserve" 
    style="color: {{color}}" *ngIf="color">

或者将它类似地应用于您在<svg></svg> 标签中的每个样式规则。不确定它是否是fill 而不是color，因为它是svg。看看有没有效果。