本文详解如何在纯 SVG 文件中嵌入 JavaScript，通过 querySelector 动态识别、移除和添加 CSS 类，实现带首尾循环（wrap-around）的 SVG 元素轮播交互，无需外部 HTML 或脚本，兼容 <object> 嵌入方式。
本文详解如何在纯 SVG 文件中嵌入 JavaScript，通过 `querySelector` 动态识别、移除和添加 CSS 类，实现带首尾循环（wrap-around）的 SVG 元素轮播交互，无需外部 HTML 或脚本，兼容 `
在 SVG 中实现纯内联交互（即所有逻辑封装于 <svg> 标签内部，不依赖外部 HTML 或 JS 文件）是一项常见但易被低估的技巧。尤其当 SVG 以 <object> 方式嵌入网页时，其内部脚本可独立运行，完美满足轻量级可视化控件（如网络选择器、状态指示器、步骤导航等）的需求。
核心思路是：利用 CSS 类（如 .on）控制可见性，配合 document.querySelector() 定位当前激活项，并通过模运算（%）实现环形索引计算——这是达成“首尾无缝循环”的关键。
✅ 正确实现：基于文本内容推导索引 + 模运算环形定位
观察原始 SVG 结构可知：
立即学习“Java免费学习笔记（深入）”；
- 所有可切换项均为 <g class="cls-security net-N"> 形式（N 为 0–8）；
- 当前激活项额外拥有 on 类；
- 每个组内含一个 <text> 元素，其内容即为标识符（如 "1"、"X"）；
因此，我们不依赖 DOM 顺序索引（易受结构变更影响），而是从 <text> 文本提取语义编号，再通过数学运算确定目标索引：
function cycleLeft() {
const current = document.querySelector("svg > .cls-security.on");
if (!current) return;
const textContent = current.querySelector("text").textContent.trim();
// 处理特殊值 "X" → 视为 0；数字则转为整数
const baseNum = textContent === "X" ? 0 : parseInt(textContent, 10);
const total = 9; // net-0 至 net-8 共 9 项
const prevIndex = (baseNum - 1 + total) % total; // 环形减法：-1 → 8
current.classList.remove("on");
const target = document.querySelector(`svg > .cls-security.net-${prevIndex}`);
if (target) target.classList.add("on");
}
function cycleRight() {
const current = document.querySelector("svg > .cls-security.on");
if (!current) return;
const textContent = current.querySelector("text").textContent.trim();
const baseNum = textContent === "X" ? 0 : parseInt(textContent, 10);
const total = 9;
const nextIndex = (baseNum + 1) % total; // 环形加法：8 → 0
current.classList.remove("on");
const target = document.querySelector(`svg > .cls-security.net-${nextIndex}`);
if (target) target.classList.add("on");
}? 为什么用 (n - 1 + total) % total 而非 n - 1 < 0 ? 8 : n - 1？
模运算写法更简洁、可扩展（如后续增删项只需改 total），且天然规避负数边界判断，是环形索引的标准实践。
⚠️ 关键注意事项
- 作用域与上下文：SVG 内联脚本中的 document 指向 SVG 文档本身（即 <svg> 根节点），因此 document.querySelector("svg > ...") 是安全且精准的。避免使用 document.getElementById() 等可能跨文档失效的方法。
- CSS 优先级保障：确保 .cls-security.on { visibility: visible; } 的样式规则权重足够高，能覆盖 .cls-security { visibility: hidden; }。当前示例中通过复合类选择器已满足要求。
-
健壮性增强建议：
- 添加空值校验（如 if (!current || !target) return;）防止 DOM 查询失败导致静默错误；
- 对 textContent 进行 trim() 和类型归一化（如 "X" → 0），提升容错性；
- 若未来需支持更多非数字标识（如 "A", "B"），可扩展为映射表：{ X: 0, A: 1, B: 2 }。
? 替代方案对比（为何不推荐）
- ❌ 遍历 getElementsByClassName 数组并查索引：DOM 顺序可能因 SVG 编辑变动，且需手动处理数组越界，代码冗长易错；
- ❌ 维护全局计数器变量：破坏状态单一来源（state should derive from DOM），增加同步风险；
- ✅ 当前方案优势：状态完全由 DOM 类名和文本内容决定，函数无副作用、可复用、易测试，符合声明式交互设计原则。
将上述脚本嵌入 SVG 的 <script> 标签中（CDATA 包裹），即可立即生效。整个过程不引入任何外部依赖，真正实现“开箱即用”的 SVG 交互组件——这正是内联 SVG 的强大所在。
