更改用JSON制作动画的SVG的CSS颜色

Question

我从这个网站下载了免费的汉堡动画菜单图标。正如您在下面的代码片段中看到的，动画在单击时播放，在第二次单击时播放。一切都可以，但如何在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>

Answer 1

为了更改SVG元素的颜色，需要将CSS应用于实际包含图形的嵌套元素(路径、矩形等(。

为此，我们可以使用以下CSS。

div#hamburger path {
stroke: red;
}

通过这种方式，我们将CSS规则应用于嵌套在"div#hamburger"中的任何"path"元素

Answer 2

对不起，我不知道如何在CSS中更改颜色，但您可以通过在RGB颜色(0-255(中将所有"k":[0,0,0,1]替换为您想要的颜色来更改svgData中的颜色