SVG填充颜色不起作用答案

【问题标题】：SVG Fill Color Not WorkingSVG填充颜色不起作用
【发布时间】：2017-02-06 04:15:29
【问题描述】：

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

svg path {
   fill: blue;
}

但是对于这个 - 以及我遇到的其他 - 出于某种原因，这种方式行不通。

Here's a fiddle demonstrating the problem

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

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

谢谢

【问题讨论】：

标签： css svg

【解决方案1】：

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

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

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

这是the Fiddle

【讨论】：

谢谢！我的另一个问题是我不知道以“svg txt”为目标，但现在它是有道理的:)
@HonsaStunna 这是因为默认情况下内联样式（SVG 使用的）会覆盖外部 CSS 样式。

【解决方案2】：

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

svg path {
   fill: blue!important;
}

【讨论】：

这是唯一有效的！谢谢。只需在路径前加上您的类名，然后您就可以直接更改特定的 svg。

【解决方案3】：

如果您无法控制您的 SVG，（可能是因为它来自您正在重新主题化的外部源），您将无法使用 !important 覆盖 SVG 的 fill 属性。

如果您的 SVG 在您的代码库中，最好设置fill="currentColor"，然后设置 CSS 颜色属性。

您的 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:"currentColor";">
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：

.logo-wrapper {
  color: green;
}

另请参阅：fill property of SVG does not working in Chrome

【讨论】：

【解决方案4】：

使用 !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>

【讨论】：

【解决方案5】：

尽量避免使用!important。相反，请尝试使您的选择器更具体。请记住，inline 优先于 id，后者优先于类，后者优先于元素。

您的解决方案可能就像添加一个额外的类一样简单，或者在单个元素的情况下，一个id。

HTML

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

CSS

#logo-wrapper {  fill: red }

更详细的解释请阅读this article

【讨论】：

似乎 svg 具有填充属性，因此如果您无法控制 svg（即主题），则需要覆盖 css

【解决方案6】：

如果您可以访问 svg 内部代码，只需将 path 设置为 fill="currentColor"，然后设置常规 color 属性，而不是 fill 父 svg 中的 prop，例如：<svg color="#000">

【讨论】：

【解决方案7】：

我无法获得任何 CSS SVG 的显示，直到我偶然发现 SVG 中属性值的引号不是可选的，因为它们在 HTML 中表示非包含空格。此外，像fill="#00BB00" 这样的十六进制值对我不起作用，即使使用fill="currentColor" 建议（fill="green" 确实有效）。最后，如果在 CSS 中使用“url()”，则不能包含换行符或省略 xmlns 属性。

【讨论】：

【解决方案8】：

还可能需要做对我有用的path { fill: green!important; }

【讨论】：