更改使用 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 中更改顏色，但是您可以通過將所有"k":[0,0,0,1]替換為您想要的 RGB 顏色 (0-255) 來更改 svgData 中的顏色