How to modify CSS style in SVG using Angular2?

Question

How to modify CSS style in SVG using Angular2?

I have been working on adding SVG to an Angular2 component's template and I've encountered some challenges. Here is the code snippet I am using:

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo
</object>

To dynamically add CSS style, I have tried various methods to access the SVG content:

1)

public ngAfterViewInit(): void {
        this.el = this._doc.getElementsByTagName('svg');
        console.log(this.el);
    }

The console displays: [ ]

2)

public ngAfterViewInit(): void {
  this.el = this._elementRef.nativeElement.querySelector('object');
  console.log(this.el);
}

The console shows: null

My Question:

I need assistance in accessing SVG content and changing CSS styles in TypeScript. Can anyone provide guidance on this matter?

angular typescript dom svg angular2-template

Answer 1

Answer №1

In this scenario, there are a couple of issues that need to be addressed. Firstly, it is important to note that not using an inline SVG may restrict your ability to modify the styling attributes of the SVG element, as highlighted in this discussion on Stack Overflow. This limitation does not stem from Angular itself.

To work around this issue effectively within an Angular environment, one suggestion would be to create a dedicated component that includes the complete SVG content within its HTML:

svg-component.html

<!-- The contents of svg-component.html, where certain properties of the SVG are bound -->
<svg.... [style.fill]="color"/></svg>

In the corresponding TypeScript file, svg-component.ts:

// Within svg-component.ts, properties can be mapped to inputs for ease of use
import { Component, OnInit, Input } from '@angular/core';

@Component({
 ...
})
export class SvgComponent implements OnInit {
  @Input color = '#fff'; 
  ...
}

Usage example:

<svg-component color="#000"></svg-component>

Additionally, you might consider adopting the strategy employed by icon libraries and creating a custom font. However, unless you have an extensive collection of icons and specifically require the functionality offered by CSS properties associated with fonts, this approach may not be the most practical choice.

Answer 2

In this scenario, there are a couple of issues that need to be addressed. Firstly, it is important to note that not using an inline SVG may restrict your ability to modify the styling attributes of the SVG element, as highlighted in this discussion on Stack Overflow. This limitation does not stem from Angular itself.

To work around this issue effectively within an Angular environment, one suggestion would be to create a dedicated component that includes the complete SVG content within its HTML:

svg-component.html

<!-- The contents of svg-component.html, where certain properties of the SVG are bound -->
<svg.... [style.fill]="color"/></svg>

In the corresponding TypeScript file, svg-component.ts:

// Within svg-component.ts, properties can be mapped to inputs for ease of use
import { Component, OnInit, Input } from '@angular/core';

@Component({
 ...
})
export class SvgComponent implements OnInit {
  @Input color = '#fff'; 
  ...
}

Usage example:

<svg-component color="#000"></svg-component>

Additionally, you might consider adopting the strategy employed by icon libraries and creating a custom font. However, unless you have an extensive collection of icons and specifically require the functionality offered by CSS properties associated with fonts, this approach may not be the most practical choice.

Answer 3

Answer №2

You have the ability to directly insert the svg into your code.

html:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
  <g>
    <path id="myId" d="..."/>
  </g>
</svg>

css:

#myId {
  fill: red;
}

typescript: Using Jquery is an option.

import $ from 'jquery';

this.el = $("#myId");

EDIT:

As mentioned in the comments below, you can also utilize document.getElementById("myId") without importing jquery.

Answer 4

You have the ability to directly insert the svg into your code.

html:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
  <g>
    <path id="myId" d="..."/>
  </g>
</svg>

css:

#myId {
  fill: red;
}

typescript: Using Jquery is an option.

import $ from 'jquery';

this.el = $("#myId");

EDIT:

As mentioned in the comments below, you can also utilize document.getElementById("myId") without importing jquery.

Answer 5

Answer №3

It appears that this question is missing crucial information and may be approaching the situation from an XY Problem perspective. In Angular template, it's recommended to utilize the templating system and property binding instead of directly manipulating elements with DOM methods.

If you're unsure about what CSS styles to add, here are some general examples:

Option 1

Utilize the [ngClass] binding to modify a single class.

Template:

<object type="image/svg+xml"
        data="kiwi.svg"
        [ngClass]="kiwiClass">
  Kiwi Logo
</object>

Component:

// Assign as required
kiwiClass = "logo";

Option 2

Use [ngClass] to control the state of a small class list

Template:

<object type="image/svg+xml"
        data="kiwi.svg"
        class="logo"
        [ngClass]="{'red': shouldBeRed, 'blue': checkShouldBeBlue()}">
  Kiwi Logo
</object>

In your stylesheet, define the styles for the .red and .blue classes, along with the conditions for shouldBeRed and shouldBeBlue.

The [ngClass] values can evaluate to boolean expressions, including functions.

Option 3

Employ [class.className] to manage the state of a small class list

Template:

<object type="image/svg+xml"
        data="kiwi.svg"
        class="logo"
        [class.red]="shouldBeRed"
        [class.blue]="checkShouldBeBlue()">
  Kiwi Logo
</object>

For assigning styles and conditions, follow the same approach as in option 2.

Check out this informative resource on utilizing SVG with Angular 2+.

Answer 6

It appears that this question is missing crucial information and may be approaching the situation from an XY Problem perspective. In Angular template, it's recommended to utilize the templating system and property binding instead of directly manipulating elements with DOM methods.

If you're unsure about what CSS styles to add, here are some general examples:

Option 1

Utilize the [ngClass] binding to modify a single class.

Template:

<object type="image/svg+xml"
        data="kiwi.svg"
        [ngClass]="kiwiClass">
  Kiwi Logo
</object>

Component:

// Assign as required
kiwiClass = "logo";

Option 2

Use [ngClass] to control the state of a small class list

Template:

<object type="image/svg+xml"
        data="kiwi.svg"
        class="logo"
        [ngClass]="{'red': shouldBeRed, 'blue': checkShouldBeBlue()}">
  Kiwi Logo
</object>

In your stylesheet, define the styles for the .red and .blue classes, along with the conditions for shouldBeRed and shouldBeBlue.

The [ngClass] values can evaluate to boolean expressions, including functions.

Option 3

Employ [class.className] to manage the state of a small class list

Template:

<object type="image/svg+xml"
        data="kiwi.svg"
        class="logo"
        [class.red]="shouldBeRed"
        [class.blue]="checkShouldBeBlue()">
  Kiwi Logo
</object>

For assigning styles and conditions, follow the same approach as in option 2.

Check out this informative resource on utilizing SVG with Angular 2+.

How to modify CSS style in SVG using Angular2?

Answer №1

Answer №2

Answer №3

Option 1

Option 2

Option 3

Similar questions

What are the signs that indicate whether a parameter is an enum or an array of enums?

How to retrieve the data from a PHP file using Angular 4 CLI?

Upgrading from Angular 10 to 13 resulted in an error that required adding 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'. Although this fix was implemented, the issue still persists and the application remains broken

Utilizing Angular 2 for transforming JSON data into Angular classes

The attribute 'xxx' is not found within the 'Readonly<{}>' type

Setting up Angular universal web configuration with SSL and automatic redirection to the www subdomain

There was an error parsing the data from the specified URL (http://localhost:8000/src/client/assets/data.json

Sharing information between components in React JS

I cannot access the 'isLoading' state in React Query because it is undefined

Are there any simple methods for streaming HLS Video in a React application that are not resource-intensive?

There was an issue thrown during the afterAll function: Unable to access properties of undefined

The Angular NgForm method form.resetForm does not seem to be resetting properly when dealing with arrays

Setting up a variable with no operation assigned to it

How to use Angular pipes to format dates as Long Dates in the template

Is the Angular CLI proxy configuration failing to work properly?

The Angular 2 router encounters issues with reusing a Component instance when navigating to the same route with varying parameters

Listener of events calculates the outcome

Why are the tabs in Angular displaying differently when the tab titles exceed 8 characters with Bootstrap 5?

Having trouble installing npm packages due to an error

There has been a mistake: "Unable to locate a suitable differ supporting object '[object Object]' of type 'object'. NgFor is only able to bind to Iterables like Arrays."