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组件的颜色更改为我想要的任何颜色（在我的第一个组件中设置颜色=＆＃34;白色＆＃34; ）并具有该颜色适用于我的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。看看它是否有效。

Angular：transclusion，设置SVG元素的颜色

2 个答案: