使用 SVG 的多路径和 <g> 标签进行 CSS 操作-html教程-PHP中文网

使用 SVG 的多路径和 <g> 标签进行 CSS 操作

聖光之護

发布： 2025-10-12 10:48:16

原创

429人浏览过

使用 svg 的多路径和 <g> 标签进行 <a style= css 操作" /> 标签进行 css 操作" />

本文旨在帮助开发者理解如何获取和使用包含多路径和 <g> 标签的 SVG 图标，以便进行更精细的 CSS 样式控制。文章将介绍 SVG 结构、如何获取详细的 SVG 资源，以及如何通过 CSS 选择器操作 SVG 内部元素，从而实现更灵活的图标样式定制。

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图像格式，允许开发者创建可缩放且不失真的图像。与位图图像不同，SVG 图像由路径、线条、形状和文本等矢量元素组成，这些元素可以通过 CSS 进行样式控制。

理解 SVG 结构

一个典型的 SVG 文件包含以下基本元素：

<svg>: SVG 图像的根元素，定义了 SVG 画布的尺寸和坐标系统。
<path>: 定义路径的元素，用于绘制复杂的形状。d 属性包含路径的指令，例如移动到、绘制直线、绘制曲线等。
<g>: 用于将多个 SVG 元素分组的容器元素。可以使用 CSS 同时对整个组应用样式。
<rect>, <circle>, <line>, <polygon>, <ellipse>: 用于绘制基本形状的元素。

例如：

立即学习“前端免费学习笔记（深入）”；

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

登录后复制

在这个例子中，svg元素定义了一个100x100的画布，circle元素在画布中心绘制了一个半径为40的圆，并设置了描边和填充颜色。

获取详细的 SVG 资源

要获得包含多路径和 <g> 标签的 SVG 图标，有以下几种方法：

使用专业图标库: 许多图标库（例如 Font Awesome Pro, Heroicons, Remix Icon 等）提供详细的 SVG 图标，这些图标通常包含多个路径和分组，方便进行样式定制。注意免费版本可能没有Pro版本那样详细。
使用矢量图形编辑软件: 使用 Inkscape 或 Adobe Illustrator 等矢量图形编辑软件，可以手动创建或编辑 SVG 图标。这些软件允许开发者添加、删除和修改路径，以及将元素分组到 <g> 标签中。
从现有 SVG 图标中提取: 可以从现有的 SVG 图标中提取所需的路径和分组，并将其组合成新的图标。

使用 CSS 操作 SVG 元素

可以使用 CSS 选择器来选择和修改 SVG 元素的样式。以下是一些常用的 CSS 选择器：

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

元素选择器: 例如 path、circle、g 等，用于选择特定类型的 SVG 元素。
类选择器: 例如 .primary、.secondary 等，用于选择具有特定 class 属性的 SVG 元素。
ID 选择器: 例如 #icon，用于选择具有特定 id 属性的 SVG 元素。

例如，要将所有 path 元素的填充颜色设置为红色，可以使用以下 CSS 代码：

path {
  fill: red;
}

登录后复制

要将具有 primary 类的 path 元素的填充颜色设置为蓝色，可以使用以下 CSS 代码：

path.primary {
  fill: blue;
}

登录后复制

以下示例展示了如何使用 CSS 修改包含多个路径的 SVG 图标的颜色：

<svg width="100" height="100">
  <g class="icon">
    <path class="primary" d="M10 10 L90 10 L90 90 L10 90 Z" />
    <path class="secondary" d="M20 20 L80 20 L80 80 L20 80 Z" />
  </g>
</svg>

登录后复制

.icon .primary {
  fill: blue;
}

.icon .secondary {
  fill: lightblue;
}

登录后复制

在这个例子中，.icon .primary 选择器选择了 icon 组中具有 primary 类的 path 元素，并将其填充颜色设置为蓝色。.icon .secondary 选择器选择了 icon 组中具有 secondary 类的 path 元素，并将其填充颜色设置为浅蓝色。

注意事项

内联 SVG 与外部 SVG: SVG 可以内联嵌入到 HTML 文档中，也可以作为外部文件引用。内联 SVG 可以直接使用 CSS 进行样式控制，而外部 SVG 需要使用 <object>、<iframe> 或 <img> 标签引入，并且可能受到跨域限制。
CSS 属性: 并非所有的 CSS 属性都适用于 SVG 元素。常用的 CSS 属性包括 fill（填充颜色）、stroke（描边颜色）、stroke-width（描边宽度）、opacity（透明度）等。
动画: 可以使用 CSS 动画或 JavaScript 来创建 SVG 动画效果。