In order to change the color of an SVG element will need to apply the CSS to it’s nested elements that actually hold the drawing (path,rect, etc..).
To do so, we can use the following CSS.
div#hamburger path {
stroke: red;
}
This way we apply the CSS rule to any ‘path’ element nested inside of the ‘div#hamburger’
Sorry I don’t know how to change color in CSS, but your can change color in svgData by replace all "k":[0,0,0,1] to color that your want in RGB color (0-255)
I downloaded free animated hamburger menu icon from this website. As you can see in the code snippet below, the animation plays on click, and plays back on the second click. Everything works, but how to change its color in CSS?
// JSON
var svgData = {"v":"5.5.2","fr":30,"ip":0,"op":60,"w":24,"h":24,"nm":"menu V2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"menu V2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[12,12,0],"ix":2},"a":{"a":0,"k":[12,12,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[6,-6],[-6,6]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.757,"y":0},"t":0,"s":[12,6],"to":[0,1],"ti":[0,-1]},{"t":10,"s":[12,12]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.202],"y":[1.082]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[45]},{"i":{"x":[0.67],"y":[3129600.967]},"o":{"x":[0.167],"y":[0]},"t":45,"s":[360]},{"t":59,"s":[360]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"line/horizontal/top","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[6,-6],[-6,6]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[12,12],"to":[0,0],"ti":[0,0]},{"t":10,"s":[12,12]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.202],"y":[1.114]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[45]},{"i":{"x":[0.665],"y":[1933716.068]},"o":{"x":[0.167],"y":[0]},"t":45,"s":[270]},{"t":59,"s":[270]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"line/horizontal/center","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[6,-6],[-6,6]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.757,"y":0},"t":0,"s":[12,18],"to":[0,-1],"ti":[0,1]},{"t":10,"s":[12,12]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":45,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":0,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":9,"s":[100]},{"t":10,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"line/horizontal/bottom","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}
var hamburger = document.getElementById('hamburger');
// Animate SVG
var animation = bodymovin.loadAnimation({
container: hamburger,
renderer: 'svg',
loop: false,
autoplay: false,
animationData: svgData
});
// Animate on click
var direction = 1;
hamburger.addEventListener('click', (e) => {
animation.setDirection(direction);
animation.play();
direction = -direction;
});#hamburger {
width: 40px;
cursor: pointer;
}
/* Updated code */
#hamburger path {
stroke: #312f2f;
}
#hamburger:hover path {
stroke: #ef626c;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.js"></script>
<div id="hamburger"></div>Exactly, that’s what I thought but didn’t know how to make a proper stroke selection in CSS. Thank you so much! I updated my code, now the only problem are the weird white lines as you can see.
@KatarinaPerović what white line?
Nevermind, that probably has something to do with the JSON code.
Thank you, that’s another good way. With CSS, we can do it quicker, but this way is more specific if we need to change the color of an each SVG element.