How to use CSS Classes and jQuery In CSS
In this approach, we are using CSS classes and jQuery to change the color of the SVG image. In this example, we are using the circle element, and when we click on it a jQuery event is triggered. When the image is clicked, a random color is generated using JavaScript.
Example: In this example, we are using the above-explained approach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.icon-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.icon {
width: 220px;
height: auto;
cursor: pointer;
transition: fill 0.3s;
}
h1 {
color: green;
margin-bottom: 5px;
}
h3 {
margin-top: 10px;
font-size: 16px;
color: #333;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="icon-container">
<h1>w3wiki</h1>
<svg class="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" />
</svg>
<h3>
Changing Color using CSS Classes and jQuery
</h3>
</div>
<script>
$(document).ready(function () {
$('.icon').on('click', function () {
let randomColor =
'#' + Math.floor(Math.random() * 16777215)
.toString(16);
$(this).find('circle').css('fill', randomColor);
});
});
</script>
</body>
</html>
Output:
- In this example, jQuery updates the color of the SVG element with each click. When we click on the component, every time a new color is been filled within the component.
- We have used the jQuery CDN that links to jQuery simplifies the interactions with the HTML elements, and also makes it easier to manipulate the SVG using JavaScript for this function.
- In the JavaScript code, there is a click event listener for elements with the class “icon” When we click on the SVG, the event is been triggered and with the event handler, a random color is been assigned to the SVG image by using the ‘fill’ attribute of the ‘<circle>’ element inside the SVG using jQuery’s ‘.css()’ function.
How to change color of SVG image using CSS jQuery ?
In this article, we will see how we can replace a text element with an SVG image and then manipulate its color using CSS. SVG images are a vital way to create and display graphics on the web. When we combine the CSS and jQuery, we can create different types of attractive effects like changing the color of SVG images without reloading the page.
These are the following approaches to changing the styles of SVG images using CSS:
- CSS Classes and jQuery
- CSS Variables and jQuery