Angular: transclusion, set color of SVG element

Question

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

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

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

My logo.ts file:

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() {
  }

}

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

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?

What do you mean by "passing the color attribute into a scss style"? You could use property binding to set the color of the SVG element. Would that work for you? — ConnorsFan, Feb 15 '18 at 19:33
@ConnorsFan That would work, I was just thinking of how to do it but haven't been able to figure it out — Snorlax, Feb 15 '18 at 19:56

ConnorsFan · Accepted Answer · 2018-02-15T21:02:26.403

17

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

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

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

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.

edited Feb 15 '18 at 21:02

answered Feb 15 '18 at 20:03

ConnorsFan

70,558
13
122
146

perfect, exactly what I needed. Is there a place where I can read on what that [] thing is in the element? I'm having a hard time navigating the angular doc – Snorlax Feb 15 '18 at 20:14
Yes, you can read about Angular property binding in [this page](https://angular.io/guide/template-syntax#property-binding--property-) of the documentation. Actually, the whole page about template syntax is a must read. – ConnorsFan Feb 15 '18 at 20:17
is it possible to change fill color when I was using `img` tag wrapped around svg image – Pardeep Jain Feb 07 '19 at 09:17
@PardeepJain - According to [this answer](https://stackoverflow.com/a/24933495/1009922), it seems to be possible only for inline SVG. I haven't been successful when trying to modifiy the fill color of an SVG element used as an image `src`. – ConnorsFan Feb 07 '19 at 13:23
@ConnorsFan Yes, Even I've tried and finally end up using background-mask of HTML element as an SVG image and gave a background color to that. – Pardeep Jain Feb 08 '19 at 03:51

amal · Answer 2 · 2018-02-15T19:49:56.033

0

Try doing this,

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

Or apply it similarly to each style rule you have within your <svg></svg> tags. Not sure if it is fill instead of color you are after since it is an svg. See if it worked or not.

edited Feb 15 '18 at 19:49

answered Feb 15 '18 at 19:43

amal

3,140
1
13
20

Didn't work. The attribute appears as just style on the tag but with no color attribute nor its value. – Snorlax Feb 15 '18 at 19:55

Angular: transclusion, set color of SVG element

2 Answers2

Linked