CSS 更改 SVG 颜色 - CSS

介绍

在网页开发中，使用 SVG（可缩放矢量图形）是一种常见的方式来展示矢量图形。SVG 图像由 XML 代码组成，可以通过 CSS 来改变其外观，包括颜色。本文将介绍如何使用 CSS 更改 SVG 图像的颜色。

使用 fill 属性更改 SVG 颜色

SVG 图像的颜色可以通过 fill 属性来控制。fill 属性指定了 SVG 元素的填充颜色。可以将 fill 属性值设置为颜色名称、十六进制颜色码、RGB 值等。

下面是一些示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
  <rect x="0" y="0" width="50" height="50" fill="red" />
  <circle cx="75" cy="25" r="20" fill="#00ff00" />
  <path d="M25,75 l-20,-20 20,-20" fill="rgb(0, 0, 255)" />
</svg>

在上面的代码中，我们分别使用了颜色名称、十六进制颜色码和 RGB 值来控制矩形、圆和路径的填充颜色。

使用 CSS 类更改 SVG 颜色

除了直接在 SVG 元素上使用 fill 属性，还可以通过添加 CSS 类来更改 SVG 图像的颜色。这样可以在不修改 SVG 元素的情况下，通过修改 CSS 类来改变图像的样式。

示例代码如下：

<style>
  .red { fill: red; }
  .green { fill: #00ff00; }
  .blue { fill: rgb(0, 0, 255); }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
  <rect x="0" y="0" width="50" height="50" class="red" />
  <circle cx="75" cy="25" r="20" class="green" />
  <path d="M25,75 l-20,-20 20,-20" class="blue" />
</svg>

在上述代码中，我们定义了三个 CSS 类分别用于改变矩形、圆和路径的填充颜色。通过为 SVG 元素添加相应的类名，我们可以改变它们的颜色。

使用 currentColor 变量更改 SVG 颜色

除了使用具体的颜色值，还可以使用 currentColor 变量来更改 SVG 图像的颜色。currentColor 变量的值等于元素的 color 属性的值。

示例代码如下：

<style>
  .custom { fill: currentColor; stroke: #000; }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" class="custom" style="color: #ff0000;" />
</svg>

在上面的代码中，我们将 SVG 元素的填充颜色定义为 currentColor，并为 stroke 属性指定了一个固定的颜色。然后，通过为 SVG 元素添加 style 属性并设置 color 值为红色，我们可以改变图像的颜色。

总结

通过使用 fill 属性、CSS 类或 currentColor 变量，我们可以使用 CSS 来更改 SVG 图像的颜色。这些方法使得在网页中使用 SVG 图像更加灵活和可定制。

希望本文对你理解如何在 CSS 中更改 SVG 颜色有所帮助！