如何更改 svg 元素的颜色

在SVG（Scalable Vector Graphics）中，更改元素的颜色可以通过几种不同的方法来实现。以下是几种常用的方法：

1. 直接在SVG代码中使用fill属性更改颜色

你可以直接在SVG元素上使用fill属性来指定颜色。例如，如果你有一个矩形，可以这样更改它的颜色：

xml
<svg width="100" height="100">
  <rect width="100" height="100" fill="blue" />
</svg>

将fill属性的值从blue改为任何其他合法的颜色值，例如red、#FF0000或rgb(255,0,0)。

2. 使用CSS更改颜色

SVG元素的颜色也可以通过CSS来控制。你可以将一个类应用于SVG元素，并在CSS中定义该类的样式。例如：

xml
<svg width="100" height="100">
  <rect width="100" height="100" class="my-rectangle" />
</svg>

然后，在CSS中：

css
.my-rectangle {
  fill: green;
}

你可以通过修改对应的CSS类来更改颜色，这使得在不同的状态下更改颜色变得非常灵活。

3. 使用JavaScript动态更改颜色

如果你需要在用户交互或是某个事件发生时改变颜色，可以使用JavaScript动态地修改fill属性。例如：

html
<svg width="100" height="100">
  <rect id="my-rectangle" width="100" height="100" fill="yellow" />
</svg>

<script>
  var rect = document.getElementById('my-rectangle');
  rect.addEventListener('click', function() {
    rect.setAttribute('fill', 'purple');
  });
</script>

以上代码中，当用户点击这个矩形时，它的颜色会从黄色变为紫色。

4. 使用内联样式更改颜色

除了上述方法外，还可以在SVG元素上使用内联样式来直接更改颜色：

xml
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: orange;" />
</svg>

通过更改style属性中的fill值，你可以改变圆形的颜色。

以上就是一些在SVG中更改元素颜色的方法。当然，实现这些方法时，应该注意所选择的颜色值必须是SVG支持的格式，包括颜色名称、十六进制代码或RGB/RGBA表示法。

CSS 过滤器适用于所有当前浏览器

更改任何 SVG 颜色

1. 使用标签添加 SVG 图像 <img>。

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

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

   例如，输出 #00EE00为

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

   在这里 filter为任何颜色生成一个。

3. 将 CSS 添加 filter到此类中。

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

要更改任何 SVG 的颜色，您可以通过在任何文本编辑器中打开 SVG 文件来直接更改 SVG 代码。该代码可能类似于以下代码：

shell
<?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 属性的帮助下添加自己的颜色。看下面的例子

shell
<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 的评论，我们可以直接使用 fill 属性，而不是在 style 属性中使用 fill 元素。

如果你想动态改变颜色：

1. 在代码编辑器中打开 SVG

2. 添加或重写fill每个路径的属性fill="currentColor"

3. 现在，该 svg 将采用字体颜色的颜色，因此您可以执行以下操作：

   shell
   svg {
       color : "red";
   }

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

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

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

比如下面示例代码

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

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

<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" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
    C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
    C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
    c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
    c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

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

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

shell
<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中使用 no-svgModernizr（CDN： http: //ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js）中的类来检查SVG支持。如果没有任何 SVG 支持，则 SVG 块将被忽略并显示图像，否则图像将从 DOM 树中删除 ( display: none)：

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

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

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

仅具有路径信息的 SVG。您不能对图像执行此操作...因为您可以更改描边和填充信息的路径，然后就完成了。像Adob​​e Illustrator

因此，通过 CSS 你可以覆盖路径fill值：

shell
path { fill: orange; }

但是，如果您想要一种更灵活的方式，因为您想在发生某些悬停效果时用文本更改它，请使用：

shell
path { fill: currentColor; }


body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}

<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

运行代码片段Hide results

展开片段