Question

我是使用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;
}

由于

Answer 1

您只需在填充旁添加!important即可

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

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

这是the Fiddle

Answer 2

你的路径上有填充内联css。这会覆盖你的其他CSS。可以修复！重要。或者你可以删除内联css。

if (File.Exists(Properties.Resources.company_map_template))
{
    MessageBox.Show("Test");
    var objReader = new StreamReader(Properties.Resources.company_map_template);
    string line = "";
    line = objReader.ReadToEnd();
    objReader.Close();
    line = line.Replace("[latlong]", latitude + ", " + longitude);
    mapWebBrowser.NavigateToString(line);
}

Answer 3

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

Answer 4

如果您无法控制SVG，也许是因为它来自外部源，因此您正在重新设置主题），则您将无法使用!important覆盖SVG fill属性。

如果您的SVG位于代码库中，则最好设置fill="currentColor"，然后设置CSS color属性。

您的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

Answer 5

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

Answer 6

友好的建议，尽量避免使用！important，而是尽量使选择器更具体，请记住inline> id> classes> elements。

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

HTML

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

CSS

#logo-wrapper {  fill: red }

有关详细说明，请阅读此article

Answer 7

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

SVG填充颜色不起作用

7 个答案: