SVG作为矢量图形的重要载体，在前端页面中应用越来越广泛，其中多路径组合和分组操作是处理复杂图形的基础。下面我们来看具体的实现方式。
SVG多路径和g标签基础
SVG中的<path>标签用于定义图形的路径，一个复杂的SVG图形通常会包含多个<path>元素。而<g>标签是分组容器，可以把多个相关的SVG元素（包括多个<path>）包裹起来，形成一个逻辑分组，方便对这些元素进行统一的操作。
使用<g>标签的好处在于，我们可以对<g>设置CSS样式，这些样式会继承到分组内的所有子元素，不需要逐个给每个<path>设置样式，大幅减少重复代码。
基础示例：多路径分组与CSS样式
我们先看一个包含多个路径的SVG，用<g>标签分组后通过CSS设置样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 给g标签设置统一样式，子路径会继承 */
.shape-group {
fill: #4CAF50;
stroke: #2E7D32;
stroke-width: 2;
}
/* 单独控制分组内的第一个路径 */
.shape-group path:first-child {
fill: #81C784;
}
/* 鼠标悬停时修改整个分组的样式 */
.shape-group:hover {
fill: #C8E6C9;
cursor: pointer;
}
</style>
</head>
<body>
<svg width="300" height="200" viewBox="0 0 300 200">
<!-- g标签分组多个路径 -->
<g class="shape-group">
<!-- 第一个矩形路径 -->
<path d="M50,50 L150,50 L150,100 L50,100 Z" />
<!-- 第二个圆形路径 -->
<path d="M200,75 a25,25 0 1,0 50,0 a25,25 0 1,0 -50,0" />
<!-- 第三个三角形路径 -->
<path d="M100,120 L150,180 L50,180 Z" />
</g>
</svg>
</body>
</html>进阶操作：CSS动画与分组控制
除了基础样式设置，我们还可以结合CSS动画，对g分组内的多路径做统一的交互动画：
/* 定义旋转动画 */
@keyframes rotate-group {
from {
transform: rotate(0deg);
transform-origin: center;
}
to {
transform: rotate(360deg);
transform-origin: center;
}
}
/* 点击分组时触发动画 */
.shape-group:active {
animation: rotate-group 1s linear;
}如果我们需要单独控制某个路径，也可以给对应<path>添加独立类名，通过CSS选择器精准定位：
<g class="shape-group">
<path class="rect-path" d="M50,50 L150,50 L150,100 L50,100 Z" />
<path class="circle-path" d="M200,75 a25,25 0 1,0 50,0 a25,25 0 1,0 -50,0" />
</g>之后就可以通过.shape-group .rect-path这样的选择器单独设置矩形路径的样式，不会影响到分组内的其他路径。
注意事项
- CSS中修改SVG路径的样式时，优先使用SVG原生的属性名，比如fill、stroke，而不是CSS的background、border等属性，避免出现样式不生效的问题。
- 如果g标签设置了transform属性，子路径的坐标会基于g的坐标系进行计算，做动画时需要注意transform-origin的设置，避免动画偏移。
- 部分老版本浏览器对SVG的CSS支持有限，如果需要兼容旧环境，建议优先测试基础样式和动画的生效情况。
在实际开发中，复杂SVG图形通常由设计工具导出，导出后的代码会包含大量路径，这时候用g标签分组配合CSS操作，可以大幅提升样式调整的效率，也方便后续做交互扩展。