角度:包含，设置SVG元素的颜色 [英] Angular: transclusion, set color of SVG element

问题描述

我有一个component.html可以包含我的svg组件:

I have a component.html that transcludes my svg component:

<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组件(部分):

My svg component(part of it):

<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样式?

I want to be able to change the color of my svg component to whatever color I want (set in my first component with color="white") and have that color apply to my svg. Is there a way to pass that color attribute into a scss style?

推荐答案

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

An SVG element has a stroke and a fill color. You can set each one with the corresponding element or style attribute:

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

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

The color input property of the component must be set in the parent component:

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

您可以在此stackblitz 中尝试该代码.请注意，如果SVG元素内的shape和text元素设置了自己的stroke或fill颜色，则这些颜色将覆盖SVG元素级别上设置的颜色.

You can try the code in this stackblitz. Please note that if shape and text elements inside of the SVG element set their own stroke or fill colors, these will override the color set at the SVG element level.

这篇关于角度:包含，设置SVG元素的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！