如何更改 SVG 颜色？

介绍

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图形格式，用于在 Web 中展示图形。SVG 与传统的图片格式（如 JPG、PNG）相比，具有无限放大不失真、可编辑性强等优点。在 Web 中使用 SVG 可以实现各种图形效果，如图标、背景等。

然而，在使用 SVG 时，我们有时需要更改 SVG 中的颜色。比如，将 SVG 图标变为指定的颜色以适应不同的主题。本文将介绍如何使用 CSS 和 JavaScript 更改 SVG 颜色。

使用 CSS 更改 SVG 颜色

CSS 可以用来控制 SVG 中的元素样式，包括颜色。使用 CSS 更改 SVG 颜色的方式如下：

1. 直接在 SVG 中定义颜色

在 SVG 中使用 fill 和 stroke 属性可以控制 SVG 中元素的填充和描边样式。例如：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="red" stroke="black" stroke-width="2" />
</svg>

上面的代码定义了一个矩形，填充颜色为红色，描边颜色为黑色。我们可以直接修改 fill 和 stroke 属性的值以更改颜色。

2. 使用 CSS 样式表控制颜色

如果需要在多个 SVG 图像中使用同样的颜色，可以使用 CSS 样式表来定义颜色，然后将样式表应用到 SVG 中的元素上。例如：

<style>
  .svg-icon {
    fill: red;
    stroke: black;
    stroke-width: 2;
  }
</style>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" class="svg-icon" />
</svg>

上面的代码定义了一个名为 .svg-icon 的 CSS 类，其中包含了 SVG 元素的样式。在 SVG 中使用 class 属性将样式应用到指定的元素上。

使用 JavaScript 更改 SVG 颜色

使用 JavaScript 修改 SVG 颜色的方式一般涉及到 SVG 文档的 DOM 操作。下面介绍两种常见的方式：

1. 遍历 SVG DOM 手动修改颜色

通过遍历 SVG 文档对象模型（DOM）可以找到所需要修改的元素，然后手动修改其颜色属性。例如：

<script>
  const svgElement = document.getElementById('my-svg');
  const rectElement = svgElement.querySelector('rect');
  rectElement.setAttribute('fill', 'red');
  rectElement.setAttribute('stroke', 'black');
  rectElement.setAttribute('stroke-width', 2);
</script>

<svg id="my-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" />
</svg>

上面的代码通过 JavaScript 找到 id 为 my-svg 的 SVG 元素，并且找到其中的 rect 元素。然后手动修改了 fill、stroke 和 stroke-width 属性。需要注意的是，如果 SVG 图像中存在多个元素需要进行修改，则需要针对每个元素进行类似的操作。

2. 使用 SVG.js 简化操作

SVG.js 是一个简化操作 SVG 的 JavaScript 库，它提供了许多操作 SVG 时常用的方法，可以极大地简化代码的编写。使用 SVG.js 修改 SVG 颜色的方式如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script>
<script>
  const svg = SVG().addTo('#my-svg');
  const rect = svg.rect(80, 80).move(10, 10);

  rect.fill('red').stroke({ width: 2, color: 'black' });
</script>

<svg id="my-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
</svg>

上面的代码通过 SVG.js 创建了一个 SVG 元素，并且在其中添加了一个矩形。然后可以直接使用 fill 和 stroke 方法对矩形进行颜色的修改。由于 SVG.js 提供了许多方便的方法，因此可以省去遍历 SVG DOM 的代码。需要注意的是，使用 SVG.js 需要先引入其库文件。