SVG 颜色 - CSS

SVG 是一种基于 XML 的图形格式，可以在网页上通过 CSS 样式来修改其颜色，这在设计网页中经常会用到。本文将介绍如何使用 CSS 控制 SVG 图形的颜色。

CSS 颜色属性

CSS 提供了许多属性来控制颜色，包括：

• color: 文本颜色
• background-color: 背景颜色
• border-color: 边框颜色
• outline-color: 描边颜色

SVG 图形元素

SVG 的图形元素包括：路径（path）、矩形（rect）、圆形（circle）、椭圆（ellipse）、直线（line）、多边形（polygon）、文本（text）等。我们可以使用 CSS 来修改这些元素的颜色。

改变 SVG 元素的颜色

使用 CSS 来控制 SVG 元素的颜色，需要使用两个 CSS 属性：fill 和 stroke。

fill 控制元素的填充颜色，stroke 控制元素的描边颜色。

修改单个元素的颜色

可以通过 ID 或类选择器来选择单个 SVG 元素，然后使用 CSS 的 fill 和 stroke 属性来修改其颜色。

例如：

#myPath {
  fill: red;
  stroke: blue;
}

使用类选择器的示例：

.myShape {
  fill: green;
  stroke: yellow;
}

修改所有元素的颜色

如果要同时修改所有 SVG 元素的颜色，可以直接修改 SVG 的样式。

例如：

svg {
  fill: orange;
  stroke: black;
}

注意：修改所有 SVG 元素的颜色可能会影响到文本等其他元素的颜色。

颜色值

SVG 中支持各种颜色值，包括预定义颜色名、十六进制值、RGB 值等，可以按需选择。

.fillClass {
  fill: #e60073; /* 十六进制值 */
  stroke: rgb(0, 0, 255); /* RGB 值 */
}

颜色透明度

CSS 提供了透明度属性（opacity）来控制元素的不透明度，其值从 0（完全透明）到 1（完全不透明）。

.opacityClass {
  fill: blue;
  stroke: red;
  opacity: 0.5;
}

总结

本文介绍了使用 CSS 控制 SVG 图形颜色的方法，包括修改单个和所有元素的颜色、使用不同的颜色值以及设置透明度等。掌握这些知识将为设计师和 Web 开发人员在网页设计中带来更大的灵活性。