Horje
How to Change SVG Icon Color on Click in JavaScript ?

SVG stands for Scalable Vector Graphics and is a vector image format for two-dimensional images that may be used to generate animations. The XML format defines the SVG document. You can change the color of an SVG using the below methods:

Table of Content

Using the setAttribute()

The setAttribute() method is used to alter the SVG element’s fill attribute to dynamically change its color by passing the value for this attribute as the second parameter to this method.

Syntax:

element.setAttribute('attributeName', 'value');

Example: The below code implements the setAttribute() method to change color of SVG in JavaScript.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Change SVG color</title>
    <style>
        h2 {
            color: green;
        }
        #element{
            text-align: center;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h2>GeeksforGeeks</h2>
    <svg id='element'>
        <rect id='rectangle' width='100%'
              height='100%' fill='green' />
    </svg><br/><br/>
    <button id="btn">Change Color</button>
    <script>
        let rect =
            document.getElementById('rectangle')
        let btn =
            document.getElementById('btn')
        btn.addEventListener('click', () => {
            rect.setAttribute('fill', 'red')
        })
    </script>
</body>
 
</html>

Output:

SVGIF

Using style.fill property

In this approach, the color of the SVG element can be changed by using style.fill property in JavaScript by assigning it a new color value using the assignment operator.

Syntax: 

element.style.fill = 'value';

Example: The below code uses the style.fill property to change color of the SVG onclick in JavaScript.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Change SVG color</title>
    <style>
        h2 {
            color: green;
        }
 
        #element {
            text-align: center;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h2>GeeksforGeeks</h2>
    <svg id='element'>
        <circle id='circle' cx='50%' cy='50%'
                r='30%' fill='green' />
    </svg><br /><br />
    <button id="btn">Change Color</button>
    <script>
        let circle =
            document.getElementById('circle')
        let btn =
            document.getElementById('btn')
        btn.addEventListener('click', () => {
            circle.style.fill = 'red'
        })
    </script>
</body>
 
</html>

Output:

SVGIF


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to find Objects Containing Matching Elements from Arrays in Another Object ? How to find Objects Containing Matching Elements from Arrays in Another Object ?
How to Create Nested Arrays from a Nest of Arrays in JavaScript ? How to Create Nested Arrays from a Nest of Arrays in JavaScript ?
TypeScript Array.prototype.at() Method TypeScript Array.prototype.at() Method
How to Convert Array of Objects into Unique Array of Objects in JavaScript ? How to Convert Array of Objects into Unique Array of Objects in JavaScript ?
Reverse a String in TypeScript Reverse a String in TypeScript

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje