CSS选择器可以控制SVG元素，但控制范围和生效规则与普通HTML元素存在差异，需要结合SVG的渲染特性和浏览器支持情况来合理使用。
CSS选择器对SVG元素的控制规则
SVG元素属于XML命名空间下的节点，大部分CSS选择器都可以匹配到SVG元素，但部分样式属性的生效逻辑和HTML元素不同。以下是常见选择器的适用情况：
基础选择器
- 元素选择器：可以直接匹配SVG的原生元素，比如
circle、rect、path等，是最常用的SVG样式选择方式。 - 类选择器：只要给SVG元素添加class属性，类选择器就可以正常生效，支持度和HTML元素一致。
- ID选择器：同样可以给SVG元素设置id属性，通过ID选择器匹配设置样式，优先级高于类选择器。
- 通配符选择器：可以匹配所有SVG元素，一般用于重置SVG的默认样式。
组合选择器与伪类选择器
后代选择器、子选择器、相邻兄弟选择器等组合选择器都可以用于SVG元素，只要元素之间的层级关系符合选择器的规则即可。部分伪类选择器也支持SVG元素，比如:hover、:focus等交互伪类，但像:first-child这类结构伪类需要确认SVG元素的父节点下子元素的排列顺序。
SVG样式设置的优先级
SVG元素的样式来源有多种，优先级从高到低依次为：
- 内联style属性设置的样式
- CSS样式表中用
!important标记的样式 - CSS样式表中匹配到的普通样式
- SVG元素自带的属性样式，比如
fill、stroke等属性直接写在元素上的样式 - SVG默认的浏览器内置样式
需要注意的是，SVG的部分属性（如fill、stroke、stroke-width）既可以作为SVG元素属性设置，也可以作为CSS属性设置，当两者同时存在时，CSS属性的优先级更高。
代码示例
以下是一个使用CSS选择器控制SVG元素的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS控制SVG示例</title>
<style>
/* 元素选择器控制所有circle元素 */
circle {
fill: #e0e0e0;
stroke: #333;
stroke-width: 2;
}
/* 类选择器控制特定元素 */
.active-circle {
fill: #4caf50;
}
/* 后代选择器控制svg内的path元素 */
svg path {
stroke: #ff5722;
stroke-width: 3;
fill: none;
}
/* 交互伪类控制hover状态 */
.active-circle:hover {
fill: #81c784;
cursor: pointer;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="50" cy="50" r="40" class="active-circle" />
<circle cx="150" cy="150" r="40" />
<path d="M50 150 L150 50" />
</svg>
</body>
</html>
浏览器兼容性说明
主流浏览器对CSS选择器控制SVG元素的支持情况如下：
| 浏览器 | 支持情况 | 注意事项 |
|---|---|---|
| Chrome | 全版本支持 | 无特殊兼容问题 |
| Firefox | 全版本支持 | 早期版本对部分CSS3伪类支持不完善，建议使用稳定版 |
| Safari | 全版本支持 | 部分旧版本对SVG的CSS动画支持有差异 |
| Edge | 全版本支持 | 旧版Edge对SVG内联样式的解析逻辑和Chrome略有差异 |
| IE | IE9及以上部分支持 | 不支持CSS类选择器控制SVG元素，仅支持元素选择器和内联样式，不建议在需要兼容IE的项目中使用CSS控制SVG复杂样式 |
注意事项
- SVG的
width、height等尺寸属性，如果作为SVG元素属性设置，优先级低于CSS中对应的width、height属性设置。 - 部分CSS属性对SVG元素无效，比如
margin、padding、display: block等盒模型相关属性，SVG元素使用自身的坐标体系定位，不支持普通HTML的盒模型规则。 - 如果SVG是通过
<img>标签引入的外部文件，内部的SVG元素无法被当前页面的CSS选择器匹配到，只能通过SVG文件内部的样式控制。