CSS 设置 SVG 颜色

引言

在前端开发中，我们经常会使用 SVG（可缩放矢量图形）来创建矢量图标和其他图形。与传统的位图图像不同，SVG 是一种基于 XML 的格式，它可以通过直接在 HTML 中嵌入或使用 CSS 来进行样式控制。

本文将详细介绍如何使用 CSS 设置 SVG 图形的颜色，包括填充色和描边色，以及使用 CSS 过滤器对 SVG 进行颜色调整等操作。

为什么需要设置 SVG 颜色？

SVG 作为一种矢量图形格式，可以无损地进行缩放，而且不会失真。这使得 SVG 在不同尺寸和分辨率的设备上具有良好的适应性。

然而，有时候我们希望能够动态地改变 SVG 图形的颜色，以满足特定的设计需求。比如，当用户与页面交互时，我们可能会用不同的颜色来表示不同的状态，或者根据用户的喜好来改变图标的颜色。

使用 CSS 来设置 SVG 的颜色可以轻松实现这些需求，而无需重新绘制图形或创建多个图像版本。

通过 CSS 设置 SVG 填充色

SVG 图形的填充色可以通过 CSS 的 fill 属性来进行设置。在 CSS 中，我们可以使用各种颜色值来表示填充色，包括十六进制颜色码、RGB、RGBA、HSL、HSLA 等。

单个 SVG 图形的填充色

如果你只有一个独立的 SVG 图形，可以通过直接在 SVG 元素上设置 fill 属性来改变其填充色。

<svg width="100" height="100">
  <rect fill="#FF0000" width="100" height="100" />
</svg>

上面的示例中，我们使用红色（#FF0000）作为矩形的填充色。

使用 CSS 类设置 SVG 填充色

如果你有多个 SVG 图形，你可以为它们定义一个共同的 CSS 类，并在 CSS 中设置 fill 属性。这样，你只需要通过添加或删除 CSS 类，就能同时改变多个 SVG 图形的填充色。

<style>
  .svg-fill-red {
    fill: #FF0000;
  }
</style>

<svg width="100" height="100" class="svg-fill-red">
  <rect width="100" height="100" />
</svg>

<svg width="50" height="50" class="svg-fill-red">
  <circle cx="25" cy="25" r="25" />
</svg>

上面的示例中，我们定义了一个名为 svg-fill-red 的 CSS 类，并设置其 fill 属性为红色。然后，我们在两个 SVG 元素上应用了这个类，从而将它们的填充色改为红色。

通过 CSS 设置 SVG 描边色

SVG 图形的描边色可以通过 CSS 的 stroke 属性来进行设置。与填充色类似，我们可以使用各种颜色值来表示描边色。

单个 SVG 图形的描边色

如果你只有一个独立的 SVG 图形，可以通过直接在 SVG 元素上设置 stroke 属性来改变其描边色。

<svg width="100" height="100">
  <rect fill="#FF0000" stroke="#000000" width="100" height="100" />
</svg>

上面的示例中，我们同时设置了矩形的填充色为红色，描边色为黑色。

使用 CSS 类设置 SVG 描边色

如果你有多个 SVG 图形，你可以为它们定义一个共同的 CSS 类，并在 CSS 中设置 stroke 属性。这样，你只需要通过添加或删除 CSS 类，就能同时改变多个 SVG 图形的描边色。

<style>
  .svg-stroke-black {
    stroke: #000000;
  }
</style>

<svg width="100" height="100">
  <rect fill="#FF0000" width="100" height="100" class="svg-stroke-black" />
</svg>

<svg width="50" height="50">
  <circle cx="25" cy="25" r="25" class="svg-stroke-black" />
</svg>

上面的示例中，我们定义了一个名为 svg-stroke-black 的 CSS 类，并设置其 stroke 属性为黑色。然后，我们在两个 SVG 元素上应用了这个类，从而将它们的描边色改为黑色。

使用 CSS 过滤器调整 SVG 颜色

除了直接设置 SVG 图形的填充色和描边色，我们还可以通过 CSS 的滤镜功能来调整 SVG 的颜色。

CSS 的滤镜功能可以应用不同类型的滤镜效果，例如 brightness（亮度）、contrast（对比度）、sepia（褐色）、hue-rotate（色相旋转）等等。这些滤镜效果可以用来改变 SVG 图形的颜色、对比度和饱和度等属性。

下面是一个示例，展示了如何使用 CSS 过滤器调整 SVG 图形的颜色：

<style>
  .svg-filter {
    filter: brightness(150%);
  }
</style>

<svg width="100" height="100" class="svg-filter">
  <circle cx="50" cy="50" r="50" fill="#FF0000" />
</svg>

上面的示例中，我们定义了一个名为 svg-filter 的 CSS 类，并设置其 filter 属性为 brightness(150%)。这样，SVG 图形的亮度将增加 50%。