CSS 使用 CSS 样式化 SVG 圆形

在本文中，我们将介绍如何使用 CSS 样式化 SVG 中的圆形。SVG（可缩放矢量图形）是一种用于定义二维图形的 XML 标记语言，在网页开发中使用广泛。使用 CSS 样式化 SVG 圆形可以改变其填充颜色、边框样式、边框宽度等属性，使其更加美观。

阅读更多：CSS 教程

1. 通过 CSS 类名选择器样式化圆形

SVG 圆形在 HTML 中可以通过 <circle> 元素进行定义，支持添加类名来应用样式。我们可以使用 CSS 类名选择器来选择并样式化这些圆形元素。例如，下面的代码展示了如何为一个 SVG 圆形添加一个蓝色的填充颜色：

.blue-circle {
  fill: blue;
}

<svg width="100" height="100">
  <circle class="blue-circle" cx="50" cy="50" r="30" />
</svg>

上述代码中，我们定义了一个名为 .blue-circle 的 CSS 类，通过 fill 属性来设置圆形的填充颜色为蓝色。在 SVG 中，cx 和 cy 属性决定了圆心的位置，r 属性决定了圆的半径。通过为 <circle> 元素添加 class 属性，我们将 .blue-circle 类名应用于该圆形。

2. 通过 CSS ID 选择器样式化圆形

除了使用类名选择器，我们还可以使用 CSS ID 选择器来样式化 SVG 圆形。不同于类名选择器，ID 选择器要求每个标识符在文档中是唯一的。下面的代码演示了如何使用 CSS ID 选择器来样式化 SVG 圆形：

#red-circle {
  fill: red;
}

<svg width="100" height="100">
  <circle id="red-circle" cx="50" cy="50" r="30" />
</svg>

在上述代码中，我们定义了一个名为 #red-circle 的 CSS ID，通过 fill 属性设置圆形的填充颜色为红色。通过为 <circle> 元素添加 id 属性，我们将 #red-circle ID 应用于该圆形。

3. 使用 CSS 属性样式化圆形

除了填充颜色，我们还可以通过 CSS 属性来样式化 SVG 圆形，包括边框样式、边框宽度、边框颜色等。

3.1 边框样式

SVG 圆形的边框样式可以通过 stroke 属性来指定。下面的代码演示了如何为一个 SVG 圆形添加一条虚线边框：

.dashed-border {
  stroke: black;
  stroke-width: 2;
  stroke-dasharray: 4 2;
}

<svg width="100" height="100">
  <circle class="dashed-border" cx="50" cy="50" r="30" />
</svg>

在上述代码中，我们定义了一个名为 .dashed-border 的 CSS 类，通过 stroke 属性设置边框的颜色为黑色，stroke-width 属性设置边框的宽度为 2 像素，stroke-dasharray 属性指定了虚线的模式为 4 个像素的实线和 2 个像素的空格。通过为 <circle> 元素添加 class 属性，我们将 .dashed-border 类名应用于该圆形。

3.2 边框宽度和颜色

SVG 圆形的边框宽度和颜色可以通过 stroke-width 和 stroke 属性来指定。下面的代码演示了如何为一个 SVG 圆形设置红色边框和 4 像素的宽度：

.red-border {
  stroke: red;
  stroke-width: 4;
}

<svg width="100" height="100">
  <circle class="red-border" cx="50" cy="50" r="30" />
</svg>

在上述代码中，我们定义了一个名为 .red-border 的 CSS 类，通过 stroke 属性设置边框的颜色为红色，stroke-width 属性设置边框的宽度为 4 像素。通过为 <circle> 元素添加 class 属性，我们将 .red-border 类名应用于该圆形。

总结

本文介绍了如何使用 CSS 样式化 SVG 中的圆形。我们可以通过类名选择器或 ID 选择器来选择并样式化这些圆形元素。此外，通过设置填充颜色、边框样式、边框宽度和边框颜色等属性，我们可以进一步美化 SVG 圆形。通过灵活运用 CSS 样式化技巧，我们可以创建出各种独特的 SVG 圆形效果，为网页增加视觉吸引力。