要更改任何SVG的颜色，您可以通过在任何文本编辑器中打开SVG文件直接更改SVG代码。代码可能如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">

    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                 C181.113,454.921,171.371,464.663,161.629,474.404z"/>

    /* Some more code goes on */
    </g>
</svg>

您可以观察到有一些XML标记，如路径、圆、多边形等。在style属性的帮助下，您可以添加自己的颜色。请看下面的例子

<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                        C181.113,454.921,171.371,464.663,161.629,474.404z"/>

将style属性添加到所有标记中，这样就可以获得所需颜色的SVG。

根据Daniel的评论，我们可以直接使用填充属性，而不是样式属性中的填充元素。

使用浏览器打开图像，右键单击图像，点击查看页面源代码，您将看到图像的svg标记。应付和粘贴到你的html，然后改变填补你所选择的颜色

定位'svg'标签内的路径:

<svg>
   <path>....
</svg>

你可以内联，比如:

<path fill="#ccc">

Or

svg{
   path{
        fill: #ccc

为了改变SVG元素的颜色，我发现了一种方法，同时检查下面的谷歌搜索框搜索图标:

.search_icon { 颜色:红色; 填充:currentColor; 显示:inline-block; 宽度:100 px; 身高:100 px; ｝ < span class = " search_icon”> <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-. 27a6.471 6.471 000 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-。59岁4.23 - -1.57 l.27.28v。79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5 s7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg> . < / span >

我使用了一个span元素“display:inline-block”，高度，宽度和设置一个特定的样式“颜色:红色;到svg子元素继承的span标签。

如果相同的SVG必须使用不同的颜色多次使用，可以在隐藏的SVG中定义路径集，作为主副本。然后放置指向主路径的新实例。

注意:此方法仅适用于内联<svg>标记。它将不能与<img>标签加载.svg文件。

:root { fill: gray; } .hidden { display: none; } svg { width: 1em; height: 1em; } <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="hidden"> <path id="s_fave" d="m379 21c-57 0-104 53-123 78-19-25-66-78-123-78-74 0-133 68-133 151 0 45 18 88 49 116 0.5 0.8 1 2 2 2l197 197c2 2 5 3 8 3s5-1 8-3l206-206c2-2 3-3 5-5 0.8-0.8 1-2 2-3 23-28 35-64 35-102 0-83-60-151-133-151z"/> <path id="s_star" d="m511 196c-3-10-13-18-23-19l-148-13-58-137c-4-10-14-17-25-17-11 0-21 6-25 17l-58 137-148 13c-11 1-20 8-23 19-3 10-0.3 22 8 29l112 98-33 145c-2 11 2 22 11 28 5 3 10 5 16 5 5 0 10-1 14-4l127-76 127 76c9 6 21 5 30-1 9-6 13-17 11-28l-33-145 112-98c8-7 11-19 8-29z"/> </svg> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave"></use></svg> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star"></use></svg> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="red"></use></svg> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="gold"></use></svg> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="purple"></use></svg> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="silver"></use></svg> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="pink"></use></svg> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="blue"></use></svg>

最短的bootstrap兼容方式，没有JavaScript:

.cameraicon {
    height: 1.6em; /* Set your own icon size */
    mask: url(/camera.svg); /* Path to your image */
   -webkit-mask: url(/camera.svg) no-repeat center;
}

像这样使用它:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>