SVG作为可缩放矢量图形的标准格式，在前端页面中应用非常广泛，很多复杂的图标、插画都会用SVG来实现。如果我们需要对SVG里的多个路径做统一的样式调整，或者给不同路径添加不同的交互效果，就可以结合g标签和CSS来完成，下面我们就一步步了解具体的操作方法。
SVG路径和g标签的基本介绍
SVG中的<path>标签用来定义矢量图形的轮廓，通过d属性里的指令可以绘制出直线、曲线、圆弧等各种形状，一个复杂的SVG图形通常会包含多个path元素。而<g>标签是分组标签，可以把多个相关的SVG元素放在一起，相当于一个容器，给g标签添加的属性会默认应用到它内部的所有子元素上。
基础SVG结构示例
下面是一个包含多个路径和g标签的简单SVG示例，我们后续会基于这个结构做CSS操作：
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- 分组1：两个圆形路径 -->
<g class="circle-group">
<path d="M50,100 a30,30 0 1,0 60,0 a30,30 0 1,0 -60,0" fill="#ff6b6b"></path>
<path d="M150,100 a30,30 0 1,0 60,0 a30,30 0 1,0 -60,0" fill="#ff6b6b"></path>
</g>
<!-- 分组2：一个矩形路径 -->
<g class="rect-group">
<path d="M70,150 L130,150 L130,180 L70,180 Z" fill="#4ecdc4"></path>
</g>
</svg>通过CSS操作g标签下的所有路径
因为g标签是容器，我们可以给g标签添加class，然后通过CSS选择器选中这个g标签下的所有path元素，实现批量样式修改。这种方式适合需要统一调整某一组路径样式的场景，比如统一修改颜色、透明度等。
批量修改路径颜色示例
下面的CSS代码会把circle-group分组下的所有路径填充色改成蓝色，同时给路径添加描边：
/* 选中circle-group分组下的所有path元素 */
.circle-group path {
fill: #339af0;
stroke: #1c7ed6;
stroke-width: 2;
}批量添加悬停效果
我们还可以给整个g分组添加悬停交互，当鼠标移到分组上时，内部所有路径都会产生变化：
/* 鼠标悬停时修改分组内所有路径的透明度 */
.circle-group:hover path {
opacity: 0.7;
transition: opacity 0.3s ease;
}单独操作某个路径的CSS样式
如果我们需要单独调整某个路径的样式，不需要修改SVG结构，直接给对应的path元素添加class，然后用CSS选中即可，不会影响同分组下的其他路径。
单独修改矩形路径样式
先给矩形路径添加class，再写对应的CSS规则：
<!-- 给矩形路径添加单独class --> <path class="rect-path" d="M70,150 L130,150 L130,180 L70,180 Z" fill="#4ecdc4"></path>
/* 单独选中矩形路径修改样式 */
.rect-path {
fill: #ff922b;
stroke: #e8590c;
stroke-width: 3;
}给SVG路径添加CSS动画
SVG的path元素支持CSS动画属性，我们可以结合g标签的分组能力，给某一组路径添加统一的动画效果，比如让所有圆形路径做旋转动画。
分组路径旋转动画示例
/* 给分组添加旋转动画 */
.circle-group {
transform-origin: center;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}常见注意事项
- SVG内部的元素样式优先级和HTML一致，行内样式的优先级高于CSS样式，所以如果path元素有行内fill属性，可能需要用CSS的!important覆盖，或者去掉行内样式。
- 不是所有CSS属性都适用于SVG元素，比如margin、padding对SVG元素无效，SVG元素的位置和大小主要通过自身的属性或者transform属性控制。
- 如果SVG是用<img>标签引入的外部文件，那么内部的元素无法被当前页面的CSS选中，需要把SVG代码直接写在HTML页面里才能做CSS操作。
通过上面的方法，我们可以灵活地使用CSS操作SVG的多个路径和g标签，不管是批量调整样式还是单独修改某个元素，都能高效实现，满足各种页面交互和样式需求。