如何更改 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";
   }