svg元素在ie 8–9中不支持classlist且classname为svganimatedstring对象，需用setattribute/getattribute操作class属性，或引入classlist.js polyfill，或封装兼容函数。
SVG 元素本身支持 classList.toggle()，但在老旧浏览器（如 IE 8–9）中确实会失败——这不是写法错误，而是原生 API 缺失或 SVG 的 className 属性类型异常导致的。
IE 8–9 中 className 是 SVGAnimatedString 对象
在 IE 8–9 里，SVG 元素的 className 不是字符串，而是 SVGAnimatedString 类型对象，直接赋值 element.className = "active" 会静默失败，classList 更是根本不存在。
- 检查方式：
console.log(typeof element.className)，若输出"object"且含baseVal属性，即属此情况 - 兼容写法：需通过
element.setAttribute("class", "active")设置，读取时用element.getAttribute("class") - 避免直接操作
className属性，尤其不要写element.className += " new"
原生 classList 在 IE 9 及以下完全不可用
IE 9 不支持 element.classList，IE 8 及更早版本连 classList 属性都不存在，调用会报 TypeError: Cannot read property 'toggle' of undefined。
- 检测方案：
if ("classList" in element)，不成立时走降级逻辑 - 推荐引入 classList.js（轻量、专为 SVG 优化、支持 IE 8+），它会自动补全
add/remove/toggle/contains方法 - 加载顺序必须在业务 JS 前：
<script src="classList.min.js"></script>
内联 class 属性被忽略或解析异常
部分旧版浏览器对 SVG 内联 class="icon" 解析不稳定，尤其是当 SVG 由 <use></use> 引用或动态注入时，class 可能未挂载到实际渲染节点上。
- 确保 SVG 是内联写法（非
<img src="...">），否则无法用 JS 操作类名 - 避免用
innerHTML插入带 class 的 SVG 片段，IE 下可能剥离 class 属性；改用document.createElementNS("http://www.w3.org/2000/svg", "svg")构造 - 动态插入后，手动触发一次
element.setAttribute("class", element.getAttribute("class") || "")可强制刷新状态
polyfill 之外的务实替代方案
若项目不允许引入外部脚本，可封装一个最小兼容函数：
function toggleClass(el, cls) {
if (el.classList) return el.classList.toggle(cls);
const cur = el.getAttribute("class") || "";
const arr = cur.split(/\s+/).filter(c => c);
const idx = arr.indexOf(cls);
if (idx === -1) arr.push(cls);
else arr.splice(idx, 1);
el.setAttribute("class", arr.join(" "));
}
- 该函数同时适配 HTML 元素和 SVG 元素，不依赖
classList - 适用于点击切换颜色、显示/隐藏路径等简单交互场景
- 注意：不支持多参数（如
toggle("a","b")），如需扩展可加循环逻辑
