如何使用css改變SVG的背景顏色和文字顏色？

Question

我有 SVG，我正在做的是我必須使用 css 更改 SVG 的顏色。 我嘗試了下面的代碼，但它只是改變了背景顏色，我還想改變文本顏色。

這是我的實際 SVG。

我預期的 output。

我得到的是 output。

可能嗎？

 .mylogo2 { fill: yellow; color: red }

 <div class="mylogo2"> <svg xmlns="http://www.w3.org/2000/svg" width="187.684" height="58.885" viewBox="0 0 187.684 58.885"> <g id="Sample_Logo" data-name="Sample Logo" transform="translate(-475 -511)"> <path id="Path_1" data-name="Path 1" d="M0,19.038,187.684,0V39.848L0,58.885Z" transform="translate(475 511)"/> <path id="Path_2" data-name="Path 2" d="M6.888-8.456-.56-19.824H4.872l4.2,7.42,4.452-7.42H18.7L11.256-8.456V0H6.888ZM19.1-9.912a11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29A9.807,9.807,0,0,1,25.508-19.6a12.213,12.213,0,0,1,4.284-.728,12.213,12.213,0,0,1,4.284.728,9.807,9.807,0,0,1,3.388,2.086,9.457,9.457,0,0,1,2.226,3.29,11.2,11.2,0,0,1,.8,4.312,11.2,11.2,0,0,1-.8,4.312,9.457,9.457,0,0,1-2.226,3.29A9.807,9.807,0,0,1,34.076-.224,12.213,12.213,0,0,1,29.792.5a12.213,12.213,0,0,1-4.284-.728A9.807,9.807,0,0,1,22.12-2.31,9.457,9.457,0,0,1,19.894-5.6,11.2,11.2,0,0,1,19.1-9.912Zm4.536,0a7.271,7.271,0,0,0,.434,2.562,5.868,5.868,0,0,0,1.246,2.016A5.687,5.687,0,0,0,27.258-4a6.488,6.488,0,0,0,2.534.476A6.488,6.488,0,0,0,32.326-4a5.687,5.687,0,0,0,1.946-1.33A5.868,5.868,0,0,0,35.518-7.35a7.271,7.271,0,0,0,.434-2.562,7.3,7.3,0,0,0-.434-2.548,5.842,5.842,0,0,0-1.246-2.03,5.687,5.687,0,0,0-1.946-1.33,6.488,6.488,0,0,0-2.534-.476,6.488,6.488,0,0,0-2.534.476,5.687,5.687,0,0,0-1.946,1.33,5.842,5.842,0,0,0-1.246,2.03A7.3,7.3,0,0,0,23.632-9.912Zm36.54,2.268A9.561,9.561,0,0,1,59.64-4.4,7.147,7.147,0,0,1,58.058-1.82,7.247,7.247,0,0,1,55.44-.112,9.83,9.83,0,0,1,51.828.5a9.914,9.914,0,0,1-3.64-.616A7.247,7.247,0,0,1,45.57-1.82,7.147,7.147,0,0,1,43.988-4.4a9.561,9.561,0,0,1-.532-3.248v-12.18h4.368V-7.812A4.827,4.827,0,0,0,48.118-6.1a4.081,4.081,0,0,0,.826,1.358,3.751,3.751,0,0,0,1.274.9,4,4,0,0,0,1.61.322,3.9,3.9,0,0,0,1.6-.322,3.787,3.787,0,0,0,1.26-.9A4.081,4.081,0,0,0,55.51-6.1,4.827,4.827,0,0,0,55.8-7.812V-19.824h4.368ZM64.2-19.824h7.672a13.537,13.537,0,0,1,2.87.294,6.809,6.809,0,0,1,2.38.98A4.883,4.883,0,0,1,78.75-16.7a6.258,6.258,0,0,1,.6,2.9,5.818,5.818,0,0,1-1.092,3.57,4.916,4.916,0,0,1-3.192,1.862L80.108,0H74.872L70.728-7.924H68.572V0H64.2Zm4.368,8.2h2.576q.588,0,1.246-.042a3.9,3.9,0,0,0,1.19-.252,2.058,2.058,0,0,0,.882-.658,2,2,0,0,0,.35-1.26,2.092,2.092,0,0,0-.308-1.2,2.053,2.053,0,0,0-.784-.686,3.478,3.478,0,0,0-1.092-.322,8.908,8.908,0,0,0-1.2-.084H68.572Zm22.232-8.2h4.368V-4.032h8.092V0H90.8Zm13.8,9.912a11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29A9.807,9.807,0,0,1,111.02-19.6a12.213,12.213,0,0,1,4.284-.728,12.213,12.213,0,0,1,4.284.728,9.807,9.807,0,0,1,3.388,2.086,9.457,9.457,0,0,1,2.226,3.29,11.2,11.2,0,0,1,.8,4.312,11.2,11.2,0,0,1-.8,4.312,9.457,9.457,0,0,1-2.226,3.29,9.807,9.807,0,0,1-3.388,2.086A12.213,12.213,0,0,1,115.3.5a12.213,12.213,0,0,1-4.284-.728,9.807,9.807,0,0,1-3.388-2.086,9.457,9.457,0,0,1-2.226-3.29A11.2,11.2,0,0,1,104.608-9.912Zm4.536,0a7.271,7.271,0,0,0,.434,2.562,5.868,5.868,0,0,0,1.246,2.016A5.687,5.687,0,0,0,112.77-4a6.488,6.488,0,0,0,2.534.476A6.488,6.488,0,0,0,117.838-4a5.687,5.687,0,0,0,1.946-1.33A5.868,5.868,0,0,0,121.03-7.35a7.271,7.271,0,0,0,.434-2.562,7.3,7.3,0,0,0-.434-2.548,5.842,5.842,0,0,0-1.246-2.03,5.687,5.687,0,0,0-1.946-1.33A6.488,6.488,0,0,0,115.3-16.3a6.488,6.488,0,0,0-2.534.476,5.687,5.687,0,0,0-1.946,1.33,5.842,5.842,0,0,0-1.246,2.03A7.3,7.3,0,0,0,109.144-9.912ZM146.916-1.4A15.812,15.812,0,0,1,142.884.056,20.476,20.476,0,0,1,138.6.5a12.213,12.213,0,0,1-4.284-.728,9.807,9.807,0,0,1-3.388-2.086A9.457,9.457,0,0,1,128.7-5.6a11.2,11.2,0,0,1-.8-4.312,11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29,9.806,9.806,0,0,1,3.388-2.086,12.213,12.213,0,0,1,4.284-.728,15.855,15.855,0,0,1,4.382.574A8.58,8.58,0,0,1,146.5-17.78l-3.08,3.36a6.137,6.137,0,0,0-2.016-1.4,7.184,7.184,0,0,0-2.8-.476,6.487,6.487,0,0,0-2.534.476,5.687,5.687,0,0,0-1.946,1.33,5.842,5.842,0,0,0-1.246,2.03,7.3,7.3,0,0,0-.434,2.548,7.271,7.271,0,0,0,.434,2.562,5.868,5.868,0,0,0,1.246,2.016A5.687,5.687,0,0,0,136.066-4a6.488,6.488,0,0,0,2.534.476,8.349,8.349,0,0,0,2.464-.322,9.3,9.3,0,0,0,1.652-.658v-3.22H139.16V-11.76h7.756Zm2.772-8.512a11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29A9.807,9.807,0,0,1,156.1-19.6a12.213,12.213,0,0,1,4.284-.728,12.213,12.213,0,0,1,4.284.728,9.807,9.807,0,0,1,3.388,2.086,9.457,9.457,0,0,1,2.226,3.29,11.2,11.2,0,0,1,.8,4.312,11.2,11.2,0,0,1-.8,4.312,9.457,9.457,0,0,1-2.226,3.29,9.807,9.807,0,0,1-3.388,2.086A12.213,12.213,0,0,1,160.384.5,12.213,12.213,0,0,1,156.1-.224a9.807,9.807,0,0,1-3.388-2.086,9.457,9.457,0,0,1-2.226-3.29A11.2,11.2,0,0,1,149.688-9.912Zm4.536,0a7.271,7.271,0,0,0,.434,2.562A5.868,5.868,0,0,0,155.9-5.334,5.687,5.687,0,0,0,157.85-4a6.488,6.488,0,0,0,2.534.476A6.488,6.488,0,0,0,162.918-4a5.687,5.687,0,0,0,1.946-1.33A5.868,5.868,0,0,0,166.11-7.35a7.271,7.271,0,0,0,.434-2.562,7.3,7.3,0,0,0-.434-2.548,5.842,5.842,0,0,0-1.246-2.03,5.687,5.687,0,0,0-1.946-1.33,6.488,6.488,0,0,0-2.534-.476,6.487,6.487,0,0,0-2.534.476,5.687,5.687,0,0,0-1.946,1.33,5.842,5.842,0,0,0-1.246,2.03A7.3,7.3,0,0,0,154.224-9.912Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 484.921, 558.826)" fill="#fff"/> </g> </svg> </div>

Answer 1

您需要更改第二條路徑的填充：

 .mylogo2 { fill: yellow; } #Path_2 { fill: red; }

 <div class="mylogo2"> <svg xmlns="http://www.w3.org/2000/svg" width="187.684" height="58.885" viewBox="0 0 187.684 58.885"> <g id="Sample_Logo" data-name="Sample Logo" transform="translate(-475 -511)"> <path id="Path_1" data-name="Path 1" d="M0,19.038,187.684,0V39.848L0,58.885Z" transform="translate(475 511)"/> <path id="Path_2" data-name="Path 2" d="M6.888-8.456-.56-19.824H4.872l4.2,7.42,4.452-7.42H18.7L11.256-8.456V0H6.888ZM19.1-9.912a11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29A9.807,9.807,0,0,1,25.508-19.6a12.213,12.213,0,0,1,4.284-.728,12.213,12.213,0,0,1,4.284.728,9.807,9.807,0,0,1,3.388,2.086,9.457,9.457,0,0,1,2.226,3.29,11.2,11.2,0,0,1,.8,4.312,11.2,11.2,0,0,1-.8,4.312,9.457,9.457,0,0,1-2.226,3.29A9.807,9.807,0,0,1,34.076-.224,12.213,12.213,0,0,1,29.792.5a12.213,12.213,0,0,1-4.284-.728A9.807,9.807,0,0,1,22.12-2.31,9.457,9.457,0,0,1,19.894-5.6,11.2,11.2,0,0,1,19.1-9.912Zm4.536,0a7.271,7.271,0,0,0,.434,2.562,5.868,5.868,0,0,0,1.246,2.016A5.687,5.687,0,0,0,27.258-4a6.488,6.488,0,0,0,2.534.476A6.488,6.488,0,0,0,32.326-4a5.687,5.687,0,0,0,1.946-1.33A5.868,5.868,0,0,0,35.518-7.35a7.271,7.271,0,0,0,.434-2.562,7.3,7.3,0,0,0-.434-2.548,5.842,5.842,0,0,0-1.246-2.03,5.687,5.687,0,0,0-1.946-1.33,6.488,6.488,0,0,0-2.534-.476,6.488,6.488,0,0,0-2.534.476,5.687,5.687,0,0,0-1.946,1.33,5.842,5.842,0,0,0-1.246,2.03A7.3,7.3,0,0,0,23.632-9.912Zm36.54,2.268A9.561,9.561,0,0,1,59.64-4.4,7.147,7.147,0,0,1,58.058-1.82,7.247,7.247,0,0,1,55.44-.112,9.83,9.83,0,0,1,51.828.5a9.914,9.914,0,0,1-3.64-.616A7.247,7.247,0,0,1,45.57-1.82,7.147,7.147,0,0,1,43.988-4.4a9.561,9.561,0,0,1-.532-3.248v-12.18h4.368V-7.812A4.827,4.827,0,0,0,48.118-6.1a4.081,4.081,0,0,0,.826,1.358,3.751,3.751,0,0,0,1.274.9,4,4,0,0,0,1.61.322,3.9,3.9,0,0,0,1.6-.322,3.787,3.787,0,0,0,1.26-.9A4.081,4.081,0,0,0,55.51-6.1,4.827,4.827,0,0,0,55.8-7.812V-19.824h4.368ZM64.2-19.824h7.672a13.537,13.537,0,0,1,2.87.294,6.809,6.809,0,0,1,2.38.98A4.883,4.883,0,0,1,78.75-16.7a6.258,6.258,0,0,1,.6,2.9,5.818,5.818,0,0,1-1.092,3.57,4.916,4.916,0,0,1-3.192,1.862L80.108,0H74.872L70.728-7.924H68.572V0H64.2Zm4.368,8.2h2.576q.588,0,1.246-.042a3.9,3.9,0,0,0,1.19-.252,2.058,2.058,0,0,0,.882-.658,2,2,0,0,0,.35-1.26,2.092,2.092,0,0,0-.308-1.2,2.053,2.053,0,0,0-.784-.686,3.478,3.478,0,0,0-1.092-.322,8.908,8.908,0,0,0-1.2-.084H68.572Zm22.232-8.2h4.368V-4.032h8.092V0H90.8Zm13.8,9.912a11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29A9.807,9.807,0,0,1,111.02-19.6a12.213,12.213,0,0,1,4.284-.728,12.213,12.213,0,0,1,4.284.728,9.807,9.807,0,0,1,3.388,2.086,9.457,9.457,0,0,1,2.226,3.29,11.2,11.2,0,0,1,.8,4.312,11.2,11.2,0,0,1-.8,4.312,9.457,9.457,0,0,1-2.226,3.29,9.807,9.807,0,0,1-3.388,2.086A12.213,12.213,0,0,1,115.3.5a12.213,12.213,0,0,1-4.284-.728,9.807,9.807,0,0,1-3.388-2.086,9.457,9.457,0,0,1-2.226-3.29A11.2,11.2,0,0,1,104.608-9.912Zm4.536,0a7.271,7.271,0,0,0,.434,2.562,5.868,5.868,0,0,0,1.246,2.016A5.687,5.687,0,0,0,112.77-4a6.488,6.488,0,0,0,2.534.476A6.488,6.488,0,0,0,117.838-4a5.687,5.687,0,0,0,1.946-1.33A5.868,5.868,0,0,0,121.03-7.35a7.271,7.271,0,0,0,.434-2.562,7.3,7.3,0,0,0-.434-2.548,5.842,5.842,0,0,0-1.246-2.03,5.687,5.687,0,0,0-1.946-1.33A6.488,6.488,0,0,0,115.3-16.3a6.488,6.488,0,0,0-2.534.476,5.687,5.687,0,0,0-1.946,1.33,5.842,5.842,0,0,0-1.246,2.03A7.3,7.3,0,0,0,109.144-9.912ZM146.916-1.4A15.812,15.812,0,0,1,142.884.056,20.476,20.476,0,0,1,138.6.5a12.213,12.213,0,0,1-4.284-.728,9.807,9.807,0,0,1-3.388-2.086A9.457,9.457,0,0,1,128.7-5.6a11.2,11.2,0,0,1-.8-4.312,11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29,9.806,9.806,0,0,1,3.388-2.086,12.213,12.213,0,0,1,4.284-.728,15.855,15.855,0,0,1,4.382.574A8.58,8.58,0,0,1,146.5-17.78l-3.08,3.36a6.137,6.137,0,0,0-2.016-1.4,7.184,7.184,0,0,0-2.8-.476,6.487,6.487,0,0,0-2.534.476,5.687,5.687,0,0,0-1.946,1.33,5.842,5.842,0,0,0-1.246,2.03,7.3,7.3,0,0,0-.434,2.548,7.271,7.271,0,0,0,.434,2.562,5.868,5.868,0,0,0,1.246,2.016A5.687,5.687,0,0,0,136.066-4a6.488,6.488,0,0,0,2.534.476,8.349,8.349,0,0,0,2.464-.322,9.3,9.3,0,0,0,1.652-.658v-3.22H139.16V-11.76h7.756Zm2.772-8.512a11.2,11.2,0,0,1,.8-4.312,9.457,9.457,0,0,1,2.226-3.29A9.807,9.807,0,0,1,156.1-19.6a12.213,12.213,0,0,1,4.284-.728,12.213,12.213,0,0,1,4.284.728,9.807,9.807,0,0,1,3.388,2.086,9.457,9.457,0,0,1,2.226,3.29,11.2,11.2,0,0,1,.8,4.312,11.2,11.2,0,0,1-.8,4.312,9.457,9.457,0,0,1-2.226,3.29,9.807,9.807,0,0,1-3.388,2.086A12.213,12.213,0,0,1,160.384.5,12.213,12.213,0,0,1,156.1-.224a9.807,9.807,0,0,1-3.388-2.086,9.457,9.457,0,0,1-2.226-3.29A11.2,11.2,0,0,1,149.688-9.912Zm4.536,0a7.271,7.271,0,0,0,.434,2.562A5.868,5.868,0,0,0,155.9-5.334,5.687,5.687,0,0,0,157.85-4a6.488,6.488,0,0,0,2.534.476A6.488,6.488,0,0,0,162.918-4a5.687,5.687,0,0,0,1.946-1.33A5.868,5.868,0,0,0,166.11-7.35a7.271,7.271,0,0,0,.434-2.562,7.3,7.3,0,0,0-.434-2.548,5.842,5.842,0,0,0-1.246-2.03,5.687,5.687,0,0,0-1.946-1.33,6.488,6.488,0,0,0-2.534-.476,6.487,6.487,0,0,0-2.534.476,5.687,5.687,0,0,0-1.946,1.33,5.842,5.842,0,0,0-1.246,2.03A7.3,7.3,0,0,0,154.224-9.912Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 484.921, 558.826)" fill="#fff"/> </g> </svg> </div>