css 设置svg颜色

在网页开发中，我们经常需要在页面上使用矢量图形，而一种常用的矢量图形格式就是SVG（Scalable Vector Graphics）。

SVG是一种基于XML的标记语言，它可以定义二维图形和图形应用程序的行为。由于其可缩放性和灵活性，SVG广泛应用于网页设计、数据可视化和图形编辑等领域。

在使用SVG元素时，我们可能需要根据需求设置不同的颜色，以满足设计和视觉效果的要求。本文将详细介绍如何使用CSS来设置SVG元素的颜色。

1. SVG元素简介

SVG元素可以通过两种方式嵌入到HTML中：使用<img>标签或者直接在HTML文件中插入SVG代码。无论使用哪种方式，我们都可以通过CSS来设置SVG元素的样式。

SVG元素可以通过类似HTML元素的方式进行选择和操作。例如，可以通过id选择器、类选择器、属性选择器等方式来选择SVG元素，并为其设置样式。

2. 使用CSS选择器选择SVG元素

在使用CSS选择器选择SVG元素时，需要注意一些特殊的语法和规则。下面是一些常用的选择器示例：

2.1. 选择id为”my-svg”的SVG元素

#my-svg {
  fill: red;
}

2.2. 选择类为”svg-icon”的SVG元素

.svg-icon {
  fill: blue;
}

2.3. 选择所有的SVG元素

svg {
  fill: green;
}

通过以上方式，我们可以选择特定的SVG元素，并为其设置不同的样式。

3. 使用fill属性设置SVG元素的填充颜色

SVG元素可以通过fill属性来设置其填充颜色。fill属性接受各种颜色值，例如十六进制颜色码、RGB颜色值、颜色名称等。

以下是一些示例代码及其运行结果：

<svg>
  <rect x="10" y="10" width="100" height="100" fill="#ff0000"></rect>
  <circle cx="150" cy="60" r="50" fill="rgb(0, 255, 0)"></circle>
  <ellipse cx="300" cy="60" rx="50" ry="30" fill="blue"></ellipse>
  <polygon points="450,10 480,90 540,90 510,10" fill="rgba(255, 255, 0, 0.5)"></polygon>
</svg>

上述代码中，分别使用了四种不同的颜色（红色、绿色、蓝色和半透明黄色）填充了一个矩形、一个圆形、一个椭圆和一个多边形。

4. 使用stroke属性设置SVG元素的描边颜色

除了填充颜色，我们还可以使用stroke属性来设置SVG元素的描边颜色。stroke属性同样可以接受各种颜色值。

以下是一个示例代码及其运行结果：

<svg>
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none"></circle>
</svg>

上述代码中，我们创建了一个半径为50的圆形，并设置了其描边颜色为黑色（stroke=”black”）并设置描边宽度（stroke-width=”2″）。由于我们没有设置填充颜色（fill=”none”），所以该圆形没有填充。

5. 使用CSS伪类选择并设置SVG元素的颜色

我们还可以使用CSS伪类来选择并设置SVG元素的颜色。常用的伪类包括:hover、:active、:focus等。

以下是一些示例代码及其运行结果：

circle:hover {
  fill: yellow;
}

polygon:active {
  fill: orange;
}

rect:focus {
  fill: purple;
}

上述代码中，当鼠标悬停在一个圆形上时，其填充颜色将变为黄色。当点击一个多边形时，其填充颜色将变为橙色。当一个矩形获得焦点时，其填充颜色将变为紫色。

6. 使用CSS变量设置SVG元素的颜色

CSS变量是一种在CSS中定义的可重复使用的值。我们可以使用CSS变量来设置SVG元素的颜色，并在需要的地方进行引用和修改。

以下是一个示例代码及其运行结果：

:root {
  --my-color: green;
}

circle {
  fill: var(--my-color);
}

上述代码中，我们在根元素（:root）中定义了一个名为”my-color”的CSS变量，并将其值设置为绿色。然后，在圆形元素中，我们使用了该变量来设置其填充颜色，即fill: var(–my-color)。

之后，如果我们需要修改填充颜色，只需要修改根元素中的CSS变量值即可。

7. 总结

本文详细介绍了如何使用CSS来设置SVG元素的颜色。通过选择器、属性、CSS伪类和CSS变量等方式，我们可以灵活地对SVG元素进行颜色的设置。