SVG作为矢量图形的标准格式，在前端页面中常用于绘制图标、复杂图形和动态效果。当我们需要绘制由多个路径组成的复杂图形时，多路径的管理和样式统一修改会成为开发的难点。这时候SVG的<g>标签就能发挥重要作用，配合CSS可以实现高效的样式控制。
SVG多路径与g标签基础
什么是SVG多路径
SVG的多路径指的是一个SVG图形由多个<path>元素组合而成，每个path元素通过d属性定义一段矢量路径，多个路径拼接可以形成复杂的图形，比如自定义的图标、不规则的几何图形等。
g标签的作用
<g>标签是SVG中的分组元素，它的作用是把多个相关的SVG元素（包括path、rect、circle等）组合成一个整体。分组之后，我们可以对整个g标签应用CSS样式或者变换属性，组内的所有子元素都会继承这些样式，不需要逐个设置，大大提升了开发效率。
使用g标签包裹多路径
我们先来看一个用g标签包裹多路径的基础示例，这里绘制一个简单的星形图标，由多个路径组成：
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- 用g标签包裹所有星形相关的路径 -->
<g class="star-group">
<!-- 星形的第一个路径：左上角尖角 -->
<path d="M100 20 L120 80 L180 80 L130 110 L150 170 L100 130 L50 170 L70 110 L20 80 L80 80 Z"
fill="gold" stroke="orange" stroke-width="2"/>
<!-- 星形的内圈装饰路径 -->
<path d="M100 50 L110 90 L150 90 L120 110 L130 150 L100 120 L70 150 L80 110 L50 90 L90 90 Z"
fill="yellow" stroke="orange" stroke-width="1"/>
</g>
</svg>上面的代码中，两个path元素都被包裹在class为star-group的g标签内，后续我们可以直接对这个g标签进行CSS操作，控制所有子路径的样式。
通过CSS操作g标签内的多路径
基础样式设置
我们可以直接针对g标签的class编写CSS，设置组内所有路径的公共样式，也可以单独选择组内的某个路径设置差异化样式：
/* 设置g标签内所有路径的公共样式 */
.star-group path {
transition: all 0.3s ease;
}
/* 鼠标悬停时，整个g组内的所有路径变化 */
.star-group:hover path {
fill: orange;
stroke: darkorange;
stroke-width: 3;
}
/* 单独选择g组内的第一个路径，设置差异化样式 */
.star-group path:first-child {
filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.5));
}
/* 单独选择g组内的第二个路径，设置差异化样式 */
.star-group path:last-child {
opacity: 0.8;
}动画效果实现
结合CSS动画，我们还可以给g组内的多路径添加动态效果，比如旋转、渐变填充等：
/* 定义旋转动画 */
@keyframes rotateStar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 给整个g组添加旋转动画 */
.star-group {
transform-origin: center center;
animation: rotateStar 5s linear infinite;
}
/* 给第二个路径添加脉冲透明度动画 */
.star-group path:last-child {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 0.3;
}
}注意事项
- CSS中对SVG元素的样式控制，部分属性需要使用SVG专用的属性，比如fill对应颜色填充，stroke对应描边，不能用background替代fill。
- g标签本身不会直接渲染任何视觉内容，它只是一个逻辑分组容器，所以不要给g标签设置fill之外的视觉属性，避免兼容性问题。
- 如果需要对g组内的路径做独立的选择，建议给每个path加上单独的class，比使用first-child、last-child这类伪类选择器更稳定，避免后续调整路径顺序导致样式错乱。
完整示例
下面是一个完整的可运行示例，包含SVG多路径、g标签分组和完整的CSS操作：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG多路径与g标签CSS操作示例</title>
<style>
.star-group {
transform-origin: center center;
cursor: pointer;
}
.star-group path {
transition: all 0.3s ease;
}
.star-group:hover path {
fill: orange;
stroke: darkorange;
}
.star-group path:first-child {
fill: gold;
}
.star-group path:last-child {
fill: yellow;
opacity: 0.8;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g class="star-group">
<path d="M100 20 L120 80 L180 80 L130 110 L150 170 L100 130 L50 170 L70 110 L20 80 L80 80 Z"
stroke="orange" stroke-width="2"/>
<path d="M100 50 L110 90 L150 90 L120 110 L130 150 L100 120 L70 150 L80 110 L50 90 L90 90 Z"
stroke="orange" stroke-width="1"/>
</g>
</svg>
</body>
</html>