内联SVG的class属性用法与HTML元素完全一致，支持CSS选择器、classList操作及样式继承限制；需显式设置fill/stroke等属性，注意作用域边界和旧浏览器兼容性。
内联SVG里class属性写法和HTML元素一样
内联SVG（即直接写在HTML里的 标签）的 class 属性用法和普通HTML元素完全一致，不需要额外命名空间或特殊语法。浏览器会正常识别并应用CSS规则。
常见错误是误以为SVG元素属于“不同命名空间”就不能用 class，其实只要SVG是作为HTML文档的一部分（非XML独立文件或
class 就照常生效。
-
—— 这样写没问题 - CSS中写
.icon { width: 24px; height: 24px; }或.warning circle { fill: #f00; }都能命中 - 注意：类名区分大小写，且不能含空格或特殊字符（如点、括号），和HTML规则一致
SVG内部元素也能加class，但选择器要写对
SVG里的子元素（如 class 属性，但CSS选择器必须匹配其实际标签名，不能笼统用 *[class] 依赖继承——SVG元素不继承父级CSS的视觉属性（如 color、font-size）除非显式声明。
- 对应CSS要写成
.highlight { fill: gold; }，而不是svg .highlight（除非你想限定作用域） - 避免用
circle.highlight时漏掉命名空间意识：在HTML文档中，SVG元素默认在HTML解析上下文中，无需加svg|circle这类XML前缀 - 如果SVG被嵌入
或，则脱离当前CSS作用域，class无效
class动态增删要用Element.classList，不是className
JavaScript操作内联SVG元素的class，推荐用 classList API，它对SVG元素兼容性好，且能安全处理多个类名；直接读写 className 在部分旧浏览器（如IE）中可能返回SVGAnimatedString对象，导致赋值失败。
- ✅ 正确：
svgEl.classList.add("active"); svgEl.classList.toggle("hidden"); - ❌ 风险：
svgEl.className = "new-class";—— 在IE11中可能报错或静默失败 - SVG元素的
classList是标准DOM接口，所有现代浏览器（包括Edge 12+、Chrome 20+、Firefox 20+）都支持 - 如果需兼容极老环境（如IE9），可用
setAttribute("class", "...")替代，但注意它会覆盖全部现有类
样式优先级和fill/stroke默认值容易踩坑
给SVG元素加class后，样式不一定立即可见，因为SVG有自己的默认渲染行为：比如 fill="black"，而CSS中的 color 不影响它；必须显式设置 fill、stroke 等属性才能生效。
- CSS中
.my-icon { fill: currentColor; }是常用技巧，让SVG颜色跟随文本色，但需确保父容器有定义color - 内联样式（
style="fill:red"）比class优先级高，调试时用浏览器开发者工具检查“已计算样式”，看哪条规则被覆盖 - 某些CSS属性（如
font-family）只对 - 不要指望
display: block自动居中SVG——它仍是inline元素，需配合vertical-align或包裹容器的text-align
内联SVG的class机制本身很直白，真正卡住人的往往是fill/stroke的显式覆盖要求、CSS作用域边界（比如引用外部symbol时class不穿透），还有旧版IE对className的怪异处理。动手前先打开DevTools看computed style，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
