如何更改 svg 元素的颜色？

2020年答案

CSS Filter works on all current browsers

更改任何 SVG 颜色

使用 标签添加 SVG 图像。

<img src="dotted-arrow.svg" class="filter-green"/>

要过滤到特定颜色，请使用以下 Codepen（单击此处打开 codepen）将十六进制颜色代码转换为 CSS 过滤器：

例如，#00EE00 的输出是

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

将 CSS 过滤器添加到此类中。

    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

---

要更改任何 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 标签，如路径、圆、多边形等。您可以在样式属性的帮助下添加自己的颜色。看下面的例子

<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"/>

将样式属性添加到所有标签，以便您可以获取所需颜色的 SVG

编辑：根据丹尼尔的评论，我们可以直接使用填充属性而不是样式属性中的填充元素

---

您不能以这种方式更改图像的颜色。如果将 SVG 作为图像加载，则无法在浏览器中使用 CSS 或 Javascript 更改其显示方式。

如果您想更改您的 SVG 图像，您必须使用 <object>、<iframe> 或使用 <svg> 内联加载它。

如果您想使用页面中的技术，您需要 Modernizr 库，您可以在其中检查 SVG 支持并有条件地显示或不显示后备图像。然后，您可以内联您的 SVG 并应用您需要的样式。

看 ：

#time-3-icon { 填充：绿色； } .my-svg-alternate { 显示：无； } .no-svg .my-svg-alternate { 显示：块；宽度：100px；高度：100px；背景图片：网址（image.png）； }

您可以内联 SVG，使用类名 (my-svg-alternate) 标记备用图像：

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

在 CSS 中，使用 Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) 的 no-svg 类来检查 SVG 支持。如果没有 SVG 支持，SVG 块将被忽略并显示图像，否则图像将从 DOM 树 (display: none) 中删除：

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

然后您可以更改内联元素的颜色：

#time-3-icon {
   fill: green;
}

---

如果要动态更改颜色：

在代码编辑器中打开 SVG 添加或重写每个路径的填充属性为 fill="currentColor" 现在，该 svg 将采用您的字体颜色的颜色，因此您可以执行以下操作：

svg {
    color : "red";
}

---

只有带有路径信息的 SVG。你不能对图像这样做..作为路径，你可以更改笔触和填充信息，你就完成了。像插画家

所以：通过 CSS 你可以覆盖路径 fill 值

path { fill: orange; }

但是如果你想要更灵活的方式，因为你想在有一些悬停效果时用文本改变它..使用

path { fill: currentColor; }

身体{背景：#ddd;文本对齐：居中；填充顶部：2em； } .parent { 宽度：320px;高度：50px；显示：块；过渡：全0.3s；光标：指针；填充：12px； box-sizing：边框框； } /*** 孩子想要的颜色 ***/ .parent{ color: #000;背景：#def； } .parent:hover{ 颜色：#fff;背景：#85c1fc； } .parent span{ 字体大小：18px;右边距：8px；字体粗细：粗体；字体系列：'Helvetica'；行高：26px；垂直对齐：顶部； } .parent svg{ 最大高度：26px;宽度：自动；显示：内联； } /**** 魔术 *****/ .parent svg path{ fill: currentcolor; }

---

添加了一个测试页面 - 通过过滤器设置为 SVG 着色：

例如filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Upload & Color your SVG - Jsfiddle

灵感来自：https://blog.union.io/code/2017/08/10/img-svg-fill/

---

解决方案 1 - 编辑 SVG 以指向 currentColor

<svg>... fill: currentColor stroke: currentColor ...</svg>

然后你可以控制描边的颜色和你的css的填充

svg {
  color: blue; // or any color of your choice.
}

优点和缺点：

简单并使用常规支持的 css。

适用于：

您控制 SVG

SVG 可以内嵌在 HTML 中。

解决方案 2 - css 掩码属性

<i class="icon"></i>

.icon {
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-image: url(https://url.of.svg/....svg);
  mask-image: url(https://url.of.svg/....svg);
  background-color: blue; // or any color of your choice.
  width: 20px; 
  height: 20px; 
}
}

优点和缺点

比较容易使用

浏览器对 mask css 属性的支持是部分的。

适用于：

SVG 是外部的，通过 URL 包含在内

旨在用于现代已知浏览器。

解决方案 3 - css 过滤器属性 - 静态颜色

如果预先知道颜色，您可以使用 https://codepen.io/sosuke/pen/Pjoqqp 找到将 SVG 更改为所需颜色所需的过滤器。例如，要将 svg 转换为 #00f：

<img src="https://url.of.svg/....svg" class="icon">

.icon {
    filter: invert(8%) sepia(100%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%); 
}

如果您的原始颜色不是黑色，则在过滤器列表前面加上 brightness(0) saturate(100%) 以首先将其转换为黑色。

优点和缺点：

结果与所需颜色之间可能存在微小但不显着的差异。

适用于：

需要的颜色是预先知道的。

外部图像

---

带有背景颜色的框元素上的 SVG 掩码将导致：

身体{溢出：隐藏； } .icon { --size: 70px;显示：内联块；宽度：var(--size);高度：var（--size）；过渡：0.12 秒； -webkit-mask-size：覆盖；面具尺寸：覆盖； } .icon-bike { 背景：黑色；动画：4s帧无限线性； -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);掩码图像：网址（https://image.flaticon.com/icons/svg/89/89139.svg）； } @keyframes 帧 { 0% { 变换：translatex(100vw) } 25% { 背景：红色； } 75% { 背景：石灰； } 100% { transform:translatex(-100%) } }

注意 - Internet Explorer 浏览器不支持 SVG 蒙版

---

最简单的方法是使用 https://icomoon.io/app/#/select 等服务从 SVG 中创建字体。上传您的 SVG，单击“生成字体”，将字体文件和 css 包含到您的身边，然后像任何其他文本一样使用和设置样式。我总是这样使用它，因为它使样式更容易。

编辑： 正如@CodeMouse92 评论的article 中所述，图标字体会混淆屏幕阅读器（并且可能对 SEO 不利）。所以宁愿坚持使用 SVG。

---

您可以尝试使用此 css 过滤器对其进行着色：

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

---

简单地改变 svg 的颜色：

转到 svg 文件并在样式下，在填充中提及颜色。

<style>.cls-1{fill:#FFFFFF;}</style>

---

定位 svg 中的路径：

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

你可以做内联，比如：

<path fill="#ccc">

或者

svg{
   path{
        fill: #ccc

---

要更改 SVG 元素的颜色，我在检查下面的 Google 搜索框搜索图标时找到了一种方法：

.search_icon { 颜色：红色；填充：当前颜色；显示：内联块；宽度：100px；高度：100px； }

我已将 span 元素与“display:inline-block”、高度、宽度和设置特定样式“color:red;fill:currentColor;”一起使用到由子 svg 元素继承的跨度标记。

---

如果您使用一些技巧，您可以使用 css 更改 SVG 着色。我为此写了一个小脚本。

浏览具有 svg 图像的元素列表

将 svg 文件加载为 xml

仅获取 svg 部分

改变路径的颜色

将 src 替换为修改后的 svg 作为内联图像

$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

上面的代码可能无法正常工作，我已经为具有 svg 背景图像的元素实现了这一点，其工作方式几乎与此类似。但无论如何，您必须修改此脚本以适合您的情况。希望它有所帮助。

---

这里是速度与激情的方式:)

身体{背景颜色：#deff05; } SVG{ 宽度：30%;高度：自动； } SVG 路径 { 颜色：红色；填充：当前颜色； }

---

更改 SVG 图像颜色的一种简单方法是使用过滤器属性。

过滤器生成器 here

原始 SVG：

过滤后的 SVG：

.change-my-color {滤镜：反转（21％）棕褐色（100％）饱和（3618％）色调旋转（102度）亮度（96％）对比度（108％）; } .change-my-color2 {滤镜：反转（90％）棕褐色（93％）饱和（636％）色调旋转（338度）亮度（112％）对比度（102％）; } .change-my-color3 { 滤镜：反转（71%）棕褐色（98%）饱和（1284%）色调旋转（164deg）亮度（100%）对比度（103%）； } .change-my-color4 {滤镜：反转（23％）棕褐色（99％）饱和（2151％）色调旋转（258度）亮度（100％）对比度（112％）; }

---

发现 this 个有用的 codepen。它要求一种颜色并生成一个适当的 CSS 过滤器来实现您的颜色。

例如：

filter: 'invert(48%) sepia(75%) saturate(1969%) hue-rotate(213deg) brightness(97%) contrast(87%)',

---

例如，在您的 HTML 中：

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

使用 jQuery：

$("#struct1").css("fill","<desired colour>");

---

方法一

简单有效的方法

使用任何文本编辑器打开您的 .svg 文件

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 477.526 477.526" style="enable-background:new 0 0 477.526 477.526; 
   fill: rgb(109, 248, 248);" xml:space="preserve"> 
<svg />

给出一个样式属性并用颜色填充

另一种方式

在这里用你的形状填充颜色我有 rect 形状fill="white

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
      <g>
          <title>background</title>
          <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" 
           x="-1"/>
           <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" 
           id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" 
              width="100%"/>
           </g>
       </g>
</svg>

---

2022 Web 组件 答案

文档：https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

customElements.define("load-file", class extends HTMLElement { // 将默认 connectedCallback 声明为同步，以便可以使用 await = this.getAttribute("src"), // 如果不存在 shadowRoot，则附加一个 shadowRoot（防止移动节点时显示错误） // 声明为参数以节省 4 个字节：'let' shadowRoot = this.shadowRoot || this.attachShadow( {mode:"open"}) ) { // 从 src="" 异步加载 SVG 文件，解析为文本，添加到 shadowRoot.innerHTML shadowRoot.innerHTML = await (await fetch(src)).text() // 追加可选 解析后来自 内部的元素

---

如果同一个 SVG 必须以不同的颜色多次使用，请在一个隐藏的 SVG 中定义一组路径，作为主副本。然后放置引用主路径的新实例及其各自的填充。

注意：此方法仅适用于内联 <svg> 标记。它不适用于加载 .svg 文件的 <img> 标记。

:root { 填充：灰色； } .hidden { 显示：无； } SVG { 宽度：1em;高度：1em； }

---

如果您想对内联 svg 执行此操作，例如，您的 css 中的背景图像：

背景：url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'fill='rgba(31,159,215,1)'viewBox='. ..'/%3E%3C/svg%3E");

当然，将 ... 替换为您的内联图像代码

---

使用 svg <mask> 元素。

这比其他解决方案更好，因为：

与您的原始代码非常匹配。

在 IE 中工作！

嵌入的图像仍然可以是外部的、未修改的文件。

图像甚至不必是 SVG。

颜色继承自字体颜色，因此易于与文本一起使用。

颜色是一种普通的 CSS 颜色，不是过滤器的奇怪组合。

https://jsfiddle.net/jamiegl/5jaL0s1t/19/

---

您可以使用字体图标在 SVG 上使用任何 CSS 选项

我正在寻找一种方法来获得任何 CSS 选项，比如 SVG 的动画，最后我用我的 SVG 生成了一个字体图标，然后在一个跨度内使用它（比如 FontAwesome），所以像着色这样的任何 CSS 选项都是上可用。

我使用 https://icomoon.io 将我的 SVG 转换为字体图标。然后你可以像在 HTML 元素中使用 FontAwesome 或 MaterialIcon 一样使用它。

---

实际上，有一个更灵活的解决方案来解决这个问题：编写一个 Web Component，它将在运行时将 SVG 修补为文本。还发布在 gist 中，带有指向 JSFiddle 的链接

👍滤镜：反转（42％）棕褐色（93％）饱和（1352％）色调旋转（87度）亮度（119％）对比度（119％）;

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>

---

@Manish Menaria 的答案存在一些问题，如果我们转换白色，它会显示为灰色。

所以添加了一些调整，下面的例子专门展示了如何改变材质图标的颜色

<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>


.draft-white{
    filter: brightness(0) invert(1);
}

---

一个好的方法是使用 mixin 来控制描边颜色和填充颜色。我的 svg 被用作图标。

@mixin icon($color, $hoverColor) {
    svg {
        fill: $color;

        circle, line, path {
            fill: $color
        }

        &:hover {
            fill: $hoverColor;

            circle, line, path {
                fill: $hoverColor;
            }
        }
    }
}

然后，您可以在 scss 中执行以下操作：

.container {
    @include icon(white, blue);
}

---

如果您想使用 css 更改颜色，您还可以使用这样的在线工具：https://change-svg-color.vercel.app/

---

如果要对 svg 的颜色进行编程，则不应直接在 svg 图像上设置颜色。

2021年可以用下面的css来做颜色变化。

html{ --iron-icon-fill-color-1:green; --铁图标填充颜色2：红色； --铁图标笔画颜色：白色； } svg#icon-green{ 填充：var(--iron-icon-fill-color-1, currentcolor); stroke: var(--iron-icon-stroke-color, none); } svg#icon-red{ 填充：var(--iron-icon-fill-color-2, currentcolor); stroke: var(--iron-icon-stroke-color, none); } svg#icon{ 填充：var(--iron-icon-fill-color-x, currentcolor);中风：白色； }

---

最短的 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>

---