CSS SVG 填充颜色不起作用

SVG Fill Color Not Working

提问by Kevmon

I'm new to using SVGs and can't figure out what I'm doing wrong here. For most of them, if I want to change the color, I use:

我是使用 SVG 的新手，无法弄清楚我在这里做错了什么。对于他们中的大多数，如果我想改变颜色，我使用：

svg path {
   fill: blue;
}

But for this one - and other's I've come across - for some reason this way doesn't work.

但是对于这个 - 以及我遇到过的其他 - 由于某种原因，这种方式不起作用。

Here's a fiddle demonstrating the problem

这是一个演示问题的小提琴

HTML

HTML

<div class="logo-wrapper">
    <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="logo-personal-care"  width="100%" height="100%" viewBox="0 0 159 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Pest-Peeve-Personal-Care-Logo"><g id="PERSONAL-CARE"><text x="19.199px" y="41px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">P<tspan x="25.609px 31.901px 39.187px 45.441px 54.316px 62.773px 70.692px 76.887px 80.698px 88.639px 96.558px " y="41px 41px 41px 41px 41px 41px 41px 41px 41px 41px 41px ">ERSONAL CAR</tspan></text><text x="103.503px" y="41.007px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">E</text></g><g id="PPLogo"><path id="Fill-1" d="M158.737,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-12.385,0c-0.429,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l9.435,0c0.428,0 0.776,0.348 0.776,0.776M143.064,0.321c0.212,0.323 0.096,0.588 -0.215,1.295l-0.061,0.138l-7.178,16.408c-0.337,0.772 -0.434,0.979 -0.644,1.118c-0.146,0.095 -0.309,0.145 -0.472,0.145l-2.487,0c-0.325,0 -0.649,-0.207 -0.787,-0.502l-5.916,-12.756c-0.106,-0.229 -0.092,-0.489 0.039,-0.693c0.131,-0.205 0.36,-0.327 0.612,-0.327l2.688,0c0.331,0 0.656,0.212 0.789,0.515l3.785,8.588l5.486,-12.976c0.329,-0.778 0.424,-0.987 0.636,-1.128c0.144,-0.096 0.308,-0.146 0.473,-0.146l2.643,0c0.249,0 0.477,0.12 0.609,0.321M122.64,16.764l0,1.884c0,0.428 -0.349,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.105 0.592,0.29c0.139,0.185 0.181,0.421 0.115,0.649l-0.553,1.899c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.968,0l0,3.215l8.82,0c0.428,0 0.777,0.348 0.777,0.776M105.724,16.764l0,1.884c0,0.428 -0.348,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.139,0.185 0.18,0.422 0.114,0.65l-0.553,1.897c-0.101,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l8.821,0c0.429,0 0.777,0.348 0.777,0.776M85.303,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M82.212,2.574l-6.845,0c-0.429,0 -0.777,0.348 -0.777,0.776l0,15.298c0,0.428 0.348,0.777 0.777,0.777l2.174,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.886,-2.145 6.886,-6.038c0,-4.08 -2.446,-6.327 -6.886,-6.327M66.42,2.923c0.125,0.219 0.12,0.487 -0.014,0.715l-1.122,1.908c-0.156,0.265 -0.467,0.442 -0.774,0.442l-4.365,0l0,12.66c0,0.428 -0.348,0.777 -0.776,0.777l-2.175,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-12.66l-5.629,0c-0.429,0 -0.777,-0.348 -0.777,-0.776l0,-1.862c0,-0.428 0.348,-0.776 0.777,-0.776l15.008,0c0.264,0 0.498,0.13 0.623,0.349M48.228,14.481c0,2.552 -1.896,5.278 -7.22,5.278c-4.576,0 -6.712,-1.734 -7.257,-2.266c-0.134,-0.133 -0.218,-0.308 -0.238,-0.497c-0.028,-0.271 0.076,-0.457 0.52,-1.203l0.24,-0.402c0.411,-0.691 0.549,-0.924 0.899,-0.975c0.211,-0.032 0.429,0.032 0.597,0.175c0.473,0.4 2.253,1.709 5.239,1.709c0.772,0 3.292,-0.116 3.292,-1.618c0,-0.824 -0.14,-1.214 -3.47,-1.829c-3.504,-0.612 -6.93,-1.526 -6.93,-5.313c-0.012,-1.252 0.455,-2.395 1.351,-3.299c0.885,-0.893 2.613,-1.957 5.824,-1.957c3.644,0 5.978,1.23 6.606,1.607c0.338,0.203 0.478,0.632 0.327,0.998l-0.768,1.864c-0.085,0.207 -0.255,0.364 -0.466,0.43c-0.211,0.066 -0.442,0.032 -0.633,-0.092c-0.462,-0.3 -2.19,-1.281 -5.044,-1.281c-0.983,0 -3.27,0.148 -3.27,1.529c0,0.832 0.606,1.451 3.618,1.961c3.711,0.629 6.783,1.453 6.783,5.181M31.133,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-11.772,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.776,-0.776l11.772,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.101,0.347 -0.436,0.599 -0.798,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.777,0.348 0.777,0.777l0,1.772c0,0.428 -0.349,0.776 -0.777,0.776l-6.968,0l0,3.215l8.821,0c0.428,0 0.776,0.348 0.776,0.776M10.713,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M7.622,2.574l-6.846,0c-0.428,0 -0.776,0.348 -0.776,0.776l0,15.298c0,0.428 0.348,0.777 0.776,0.777l2.175,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.885,-2.145 6.885,-6.038c0,-4.08 -2.445,-6.327 -6.885,-6.327" style="fill:#fff;"/></g></g></svg>
</div>

CSS

CSS

.logo-wrapper svg {
  width: 300px;
}
.logo-wrapper svg path{
  fill: green;
}

Thanks

谢谢

回答by Rohman Masyhar

you can just add !importantbeside fill

你可以!important在填充旁边添加

.logo-wrapper svg {
  width: 300px;
}

.logo-wrapper svg path{
  fill: green !important;
}
.logo-wrapper svg text{
  fill: green !important;
}

This is the Fiddle

这是小提琴

回答by Bob Brinks

Your path has inline css on it with fill. This overrides your other css. Can be fixed with !important. Or you could remove the inline css.

您的路径上有带有填充的内联 css。这会覆盖您的其他 css。可以用 !important 修复。或者您可以删除内联 css。

svg path {
   fill: blue!important;
}

回答by Ganesh Putta

use !important;

使用 !important;

.logo-wrapper svg {
  width: 300px;
}

.logo-wrapper svg path{
  fill: green !important;
}

<div class="logo-wrapper">
    <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="logo-personal-care"  width="100%" height="100%" viewBox="0 0 159 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Pest-Peeve-Personal-Care-Logo"><g id="PERSONAL-CARE"><text x="19.199px" y="41px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">P<tspan x="25.609px 31.901px 39.187px 45.441px 54.316px 62.773px 70.692px 76.887px 80.698px 88.639px 96.558px " y="41px 41px 41px 41px 41px 41px 41px 41px 41px 41px 41px ">ERSONAL CAR</tspan></text><text x="103.503px" y="41.007px" style="font-family:Lucida Grande;font-size:11px;font-weight:500;fill:#fff;">E</text></g><g id="PPLogo"><path id="Fill-1" d="M158.737,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-12.385,0c-0.429,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l9.435,0c0.428,0 0.776,0.348 0.776,0.776M143.064,0.321c0.212,0.323 0.096,0.588 -0.215,1.295l-0.061,0.138l-7.178,16.408c-0.337,0.772 -0.434,0.979 -0.644,1.118c-0.146,0.095 -0.309,0.145 -0.472,0.145l-2.487,0c-0.325,0 -0.649,-0.207 -0.787,-0.502l-5.916,-12.756c-0.106,-0.229 -0.092,-0.489 0.039,-0.693c0.131,-0.205 0.36,-0.327 0.612,-0.327l2.688,0c0.331,0 0.656,0.212 0.789,0.515l3.785,8.588l5.486,-12.976c0.329,-0.778 0.424,-0.987 0.636,-1.128c0.144,-0.096 0.308,-0.146 0.473,-0.146l2.643,0c0.249,0 0.477,0.12 0.609,0.321M122.64,16.764l0,1.884c0,0.428 -0.349,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.105 0.592,0.29c0.139,0.185 0.181,0.421 0.115,0.649l-0.553,1.899c-0.1,0.347 -0.436,0.599 -0.797,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.968,0l0,3.215l8.82,0c0.428,0 0.777,0.348 0.777,0.776M105.724,16.764l0,1.884c0,0.428 -0.348,0.777 -0.777,0.777l-11.771,0c-0.428,0 -0.777,-0.349 -0.777,-0.777l0,-15.298c0,-0.428 0.349,-0.776 0.777,-0.776l11.771,0c0.238,0 0.454,0.106 0.593,0.291c0.139,0.185 0.18,0.422 0.114,0.65l-0.553,1.897c-0.101,0.347 -0.436,0.599 -0.797,0.599l-8.178,0l0,3.437l6.969,0c0.428,0 0.776,0.348 0.776,0.777l0,1.772c0,0.428 -0.348,0.776 -0.776,0.776l-6.969,0l0,3.215l8.821,0c0.429,0 0.777,0.348 0.777,0.776M85.303,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M82.212,2.574l-6.845,0c-0.429,0 -0.777,0.348 -0.777,0.776l0,15.298c0,0.428 0.348,0.777 0.777,0.777l2.174,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.886,-2.145 6.886,-6.038c0,-4.08 -2.446,-6.327 -6.886,-6.327M66.42,2.923c0.125,0.219 0.12,0.487 -0.014,0.715l-1.122,1.908c-0.156,0.265 -0.467,0.442 -0.774,0.442l-4.365,0l0,12.66c0,0.428 -0.348,0.777 -0.776,0.777l-2.175,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-12.66l-5.629,0c-0.429,0 -0.777,-0.348 -0.777,-0.776l0,-1.862c0,-0.428 0.348,-0.776 0.777,-0.776l15.008,0c0.264,0 0.498,0.13 0.623,0.349M48.228,14.481c0,2.552 -1.896,5.278 -7.22,5.278c-4.576,0 -6.712,-1.734 -7.257,-2.266c-0.134,-0.133 -0.218,-0.308 -0.238,-0.497c-0.028,-0.271 0.076,-0.457 0.52,-1.203l0.24,-0.402c0.411,-0.691 0.549,-0.924 0.899,-0.975c0.211,-0.032 0.429,0.032 0.597,0.175c0.473,0.4 2.253,1.709 5.239,1.709c0.772,0 3.292,-0.116 3.292,-1.618c0,-0.824 -0.14,-1.214 -3.47,-1.829c-3.504,-0.612 -6.93,-1.526 -6.93,-5.313c-0.012,-1.252 0.455,-2.395 1.351,-3.299c0.885,-0.893 2.613,-1.957 5.824,-1.957c3.644,0 5.978,1.23 6.606,1.607c0.338,0.203 0.478,0.632 0.327,0.998l-0.768,1.864c-0.085,0.207 -0.255,0.364 -0.466,0.43c-0.211,0.066 -0.442,0.032 -0.633,-0.092c-0.462,-0.3 -2.19,-1.281 -5.044,-1.281c-0.983,0 -3.27,0.148 -3.27,1.529c0,0.832 0.606,1.451 3.618,1.961c3.711,0.629 6.783,1.453 6.783,5.181M31.133,16.764l0,1.884c0,0.428 -0.348,0.777 -0.776,0.777l-11.772,0c-0.428,0 -0.776,-0.349 -0.776,-0.777l0,-15.298c0,-0.428 0.348,-0.776 0.776,-0.776l11.772,0c0.238,0 0.454,0.106 0.593,0.291c0.138,0.185 0.18,0.422 0.113,0.65l-0.552,1.897c-0.101,0.347 -0.436,0.599 -0.798,0.599l-8.177,0l0,3.437l6.968,0c0.428,0 0.777,0.348 0.777,0.777l0,1.772c0,0.428 -0.349,0.776 -0.777,0.776l-6.968,0l0,3.215l8.821,0c0.428,0 0.776,0.348 0.776,0.776M10.713,8.901c0,1.823 -0.924,2.6 -3.091,2.6l-3.895,0l0,-5.49l3.895,0c2.167,0 3.091,0.864 3.091,2.89M7.622,2.574l-6.846,0c-0.428,0 -0.776,0.348 -0.776,0.776l0,15.298c0,0.428 0.348,0.777 0.776,0.777l2.175,0c0.428,0 0.776,-0.349 0.776,-0.777l0,-3.709l3.895,0c4.44,0 6.885,-2.145 6.885,-6.038c0,-4.08 -2.445,-6.327 -6.885,-6.327" style="fill:#fff;"/></g></g></svg>
</div>

回答by Wiston Coronell

Friendly advise, try to avoid using !important as much as possible, instead try to make your selectors more specific, remember inline > id > classes > elements.

友情提示，尽量避免使用 !important，而是尽量让你的选择器更加具体，记住 inline > id > classes > elements。

this problem may be as easy as adding an additional class or if it is a single elements an id.

这个问题可能就像添加一个额外的类一样简单，或者如果它是一个单一的元素和一个 id。

HTML

HTML

<div id="logo-wrapper">
    ...
</div>

CSS

CSS

#logo-wrapper {  fill: red }

for a more detailed explanation please read this article

更详细的解释请阅读这篇文章