因为SVG基本上是代码，所以您只需要内容。我使用PHP来获取内容，但您可以使用任何您想要的内容。

<?php
$content    = file_get_contents($pathToSVG);
?>

然后，我已经打印内容“是”在一个div容器

<div class="fill-class"><?php echo $content;?></div>

最后将规则设置为CSS上的容器的SVG子元素

.fill-class > svg { 
    fill: orange;
}

我用SVG材质图标得到了这个结果:

Firefox 59.0.2(64位)Linux

谷歌Chrome66.0.3359.181 (Build official)(64位)Linux

Opera 53.0.2907.37 Linux

在您的案例中，主要问题是您从<img>标记导入svg，该标记将隐藏svg结构。

您需要将<svg>标记与<use>结合使用以获得所需的效果。要使其工作，您需要在SVG文件<path id='myName'…>，然后能够从<use xlink:href="#myName"/>标签检索它们。 试试下面剪的。

.icon { display: inline-block; width: 2em; height: 2em; transition: .5s; fill: currentColor; stroke-width: 5; } .icon:hover { fill: rgba(255,255,255,0); stroke: black; stroke-width: 2; } .red { color: red; } .blue { color: blue; } <svg width="0" height="0"> <defs> <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/> </svg> <span class="icon red"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span> <span class="icon blue"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span>

注意，如果您想从外部源加载SVG(而不是将其嵌入到HTML中)，则可以将任何URL放在片段#之前。另外，通常不需要在CSS中指定填充。最好考虑在SVG本身中使用fill:"currentColor"。相应元素的CSS颜色值将被使用到位。

因为SVG基本上是代码，所以您只需要内容。我使用PHP来获取内容，但您可以使用任何您想要的内容。

<?php
$content    = file_get_contents($pathToSVG);
?>

然后，我已经打印内容“是”在一个div容器

<div class="fill-class"><?php echo $content;?></div>

最后将规则设置为CSS上的容器的SVG子元素

.fill-class > svg { 
    fill: orange;
}

我用SVG材质图标得到了这个结果:

Firefox 59.0.2(64位)Linux

谷歌Chrome66.0.3359.181 (Build official)(64位)Linux

Opera 53.0.2907.37 Linux

使用滤镜转换为任何颜色。

我最近发现了这个解决方案，希望有人能使用它。 由于该解决方案使用过滤器，它可以用于任何类型的图像。不仅仅是svg。

如果你有一张单色图像，你只是想改变它的颜色，你可以在一些滤镜的帮助下做到这一点。当然，它也适用于多色图像，但你不能针对特定的颜色。只有整个图像。

过滤器来自于如何仅使用CSS过滤器将黑色转换为任何给定颜色中提出的脚本 如果您想将白色更改为任何颜色，您可以在每个过滤器中调整反转值。

.startAsBlack{ display: inline-block; width: 50px; height: 50px; background: black; } .black-green{ filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%); } .black-red{ filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%); } .black-blue{ filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%); } .black-purple{ filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%); } Black to any color: <br/> <div class="startAsBlack black-green"></div> <div class="startAsBlack black-red"></div> <div class="startAsBlack black-blue"></div> <div class="startAsBlack black-purple"></div>

如果你的形状总是一种纯色，而且你有两个以上的纯色，你可以使用Fontello，用你自己的一系列自定义SVG形状制作一个自定义图标字体。然后你可以单独用CSS设置/动画它们的大小和颜色。

对于这个问题的所有可能的用例，这是一个需要考虑的基本范例。我在很多项目中都使用过它。无论如何，如果你没有听说过Fontello，你需要去了解一下。如果你知道一个类似的更好的解决方案，我很想知道。

可能的失败:

众所周知，图标/形状字体会干扰屏幕阅读器，所以这可能需要一些处理。 Fontello在导入形状时可能很挑剔，在创建和导出形状时可能需要一些尝试和错误。 避免任何和所有分组，只使用单一的非嵌套复合形状。

编辑您的SVG文件，将fill="currentColor"添加到SVG标记中，并确保从文件中删除任何其他填充属性。

例如:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>

注意，currentColor是一个关键字(不是使用的固定颜色)。

在此之后，您可以使用CSS更改颜色，通过设置元素的颜色属性或从它的父元素。

例子:

.div-with-svg-inside {
    color: red;
}

我忘了说，你必须这样插入SVG:

<svg>
   <use xlink:href='/assets/file.svg#img' href="/assets/file.svg#img"></use>
</svg>

如果image来自某个变量，那么

<svg>
  <use [attr.xlink:href]="somevariable + '#img'" [attr.href]="somevariable + '#img'"></use>
</svg>

Note that `#img` is the id of the `svg` tag inside svg file. Also note `xlink:href` has been deprecated instead you should use `href` or use can use both to support older browser versions.

Another way of doing it: [https://css-tricks.com/cascading-svg-fill-color/][1]


  [1]: https://css-tricks.com/cascading-svg-fill-color/