How to use CSS Variables and jQuery In CSS
In this approach, we are using CSS Variables and jQuery to dynamically change the color of the SVG images. The color is assigned to a CSS variable using the setProperty()‘. then clicking the SVG jQuery triggers the function to generate the random color.
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;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.icon-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 20px;
}
.icon {
width: 120px;
height: 120px;
cursor: pointer;
transition: fill 0.3s;
fill: var(--icon-fill, initial);
}
h1 {
color: green;
margin-bottom: 5px;
}
h3 {
font-size: 16px;
color: #333;
}
/* Attractive SVG Background */
.icon-background {
fill: url(#gradient);
}
#gradient {
fill: none;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="icon-container">
<h1>w3wiki</h1>
<h3>
Changing Color using CSS Variables and jQuery
</h3>
</div>
<svg class="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<defs>
<linearGradient id="gradient" x1="0%"
y1="0%" x2="100%" y2="100%">
<stop offset="0%"
style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%"
style="stop-color:#FF5733;stop-opacity:1" />
</linearGradient>
</defs>
<rect class="icon-background" x="0" y="0"
width="100%" height="100%" rx="12" />
<rect x="4" y="4" width="16" height="16" />
</svg>
<script>
$(document).ready(function () {
$('.icon').on('click', function () {
let randomColor =
'#' + Math.floor(Math.random() * 16777215)
.toString(16);
document.documentElement.style.setProperty(
'--icon-fill', randomColor);
});
});
</script>
</body>
</html>
Output:
- In this example, by using the variable we are dynamically changing the SVG image’s color appearance through the custom property.
- This is the efficient way to modify the SVG attribute rather than direct manipulation of elements.
- We have used the “–icon-fill” CSS variable which is responsible for setting the fill color of the SVG elements.
- Here, when the click is been triggered, the script generates the random color value in the hexadecimal format.
- This color value has been assigned to the “–icon-fill” CSS variable using the ‘setProperty()’ 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