如何更改 SVG 颜色？

1. 什么是 SVG？

SVG 是 Scalable Vector Graphics 的缩写，意为可缩放矢量图形，是一种使用 XML 描述 2D 图形的标记语言。

相比于传统的位图图片格式（如 JPEG、PNG 等），SVG 图形具有以下优势：

SVG 图形相对于位图图片而言，其文件大小更小，同时能够缩放且不失真。

SVG 图形可以被搜索、索引、脚本化、压缩，并且能够与 CSS 和 JavaScript 集成。

SVG 图形能够和 HTML 、XHTML、MathML 等文档类型集成。

因此，SVG 被普遍应用于数据可视化、图标设计以及网络图像等领域。在编写 SVG 图形时，我们经常需要更改其中的颜色，比如用不同的颜色表示不同的数据分类。下面将介绍如何更改 SVG 颜色。

2. 如何更改 SVG 颜色？

2.1 使用 CSS 属性

我们可以使用 CSS 属性来更改 SVG 中的颜色。其中，最常用的是 fill 属性和 stroke 属性。fill 属性用来填充 SVG 图形内部的颜色，而 stroke 属性则用来指定 SVG 边界线的颜色。

/* 更改 fill 颜色 */
path {
  fill: blue;
}
/* 更改 stroke 颜色 */
path {
  stroke: red;
}

使用 CSS 属性更改 SVG 颜色的好处在于可以保持 SVG 图形的可缩放性并且是一种无侵入方式。

2.2 直接编辑 SVG 文件

除了使用 CSS 属性，我们还可以直接编辑 SVG 文件来更改其中的颜色。

打开 SVG 文件，查找需要更改颜色的元素，然后修改其中的 fill 属性和 stroke 属性。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="10" y="10" width="80" height="80"
        style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9"/>
</svg>

在上面的代码中，我们将矩形的 fill 属性从 "blue" 改为 "green"，stroke 属性从 "pink" 改为 "purple"。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="10" y="10" width="80" height="80"
        style="fill:green; stroke:purple; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9"/>
</svg>

保存文件后，我们可以看到 SVG 图形的颜色已经被修改了。

2.3 使用 JavaScript

除了使用 CSS 和直接编辑 SVG 文件，我们还可以使用 JavaScript 来更改 SVG 颜色。

通过 JavaScript，我们可以获取到 SVG 图形中的特定元素，然后更改它们的 fill 属性或 stroke 属性。

下面是使用 JavaScript 更改 SVG 颜色的示例代码：

// 获取 SVG 元素
let svgPath = document.querySelector('#my-svg path');
// 更改元素的 fill 属性
svgPath.setAttribute('fill', 'blue');
// 更改元素的 stroke 属性
svgPath.setAttribute('stroke', 'red');

上述代码中，我们通过 document.querySelector() 方法获取 ID 为 "my-svg" 的 SVG 元素中的 path 元素，并将其 fill 属性和 stroke 属性分别更改为 blue 和 red。

3. 小结

本文介绍了三种常用的方式来更改 SVG 颜色，包括使用 CSS 属性、直接编辑 SVG 文件以及使用 JavaScript。

CSS 更改颜色的方式是无侵入且易于维护的，但需要注意优先级的问题；直接编辑 SVG 文件可以方便快捷地更改颜色，但需要重新保存文件，不便于动态更改；使用 JavaScript 更改 SVG 颜色可以直接获取并更改特定元素的属性，但需要编写代码，不方便非开发人员操作。

因此，在实际开发中，我们需要根据具体需求选择适当的方式来更改 SVG 颜色。