本文详解如何在纯 svg 文件内使用内联 javaScript 实现安全网络组的左右循环切换，通过动态增删 on 类控制可见性，全程无需外部 HTML 或脚本，兼容 嵌入方式。
本文详解如何在纯 svg 文件内使用内联 javascript 实现安全网络组的左右循环切换，通过动态增删 `on` 类控制可见性，全程无需外部 html 或脚本，兼容 `
在 SVG 中实现交互式元素轮播（如网络组选择器），关键在于：所有逻辑必须封装于 。本文提供一套健壮、可维护的内联 js 方案——不依赖外部资源、不修改 dom 结构、天然支持首尾环绕（wrap-around），并严格遵循 SVG 的样式与脚本规范。
核心思路：基于类名索引 + 模运算实现环绕
您的原始设计已非常合理：
- 所有候选组统一使用 .cls-security 类；
- 当前激活项额外拥有 .on 类，并通过 CSS 控制 visibility: visible；
- 各组通过 net-0 至 net-8 等唯一类名标识序号。
我们无需遍历全部节点查找“上一个/下一个”，而应直接解析当前激活项的文本内容（如 “1”），结合模运算快速计算目标索引，再精准定位对应元素。该方法高效、简洁、无边界判断开销。
完整可运行代码实现
将以下 <script> 块插入 SVG 的 <defs> 后或 <svg> 末尾（确保 DOM 已就绪）：</script>
立即学习“Java免费学习笔记（深入）”；
<script><![CDATA[ function cycleLeft() { const current = document.querySelector("svg > .cls-security.on"); if (!current) return; const textContent = current.querySelector("text")?.textContent?.trim() || "0"; const num = parseInt(textContent, 10); const nextIndex = (num === 0 ? 8 : num - 1) % 9; // 显式处理 'X' → 0 → 8 的环绕 current.classList.remove("on"); const target = document.querySelector(`svg > .cls-security.net-${nextIndex}`); 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() || "0"; const num = parseInt(textContent, 10); const nextIndex = (num + 1) % 9; current.classList.remove("on"); const target = document.querySelector(`svg > .cls-security.net-${nextIndex}`); if (target) target.classList.add("on"); } ]]></script>✅ 关键改进说明：
注意事项与最佳实践
- CSS 作用域限制：SVG 内
- ：SVG 内脚本在文档解析完成时即执行，onclick 绑定可靠。若遇点击无响应，请检查浏览器是否禁用内联 JS（极少数企业环境）。
- 无障碍与降级：当前方案无键盘导航支持。如需 WCAG 合规，建议增加 tabindex=”0″ 和 keydown 监听（需扩展脚本）。
- 扩展性提示：若后续新增 net-9，只需同步更新模数 9 → 10 及 HTML 中的 net-* 节点，逻辑自动适配。
总结
您最初的架构设计完全正确——利用 CSS 类控制状态、JS 操控类名是 SVG 内联交互的最佳实践。本文提供的实现不仅解决了环绕逻辑，更强化了鲁棒性与可维护性。只要保持 net-N 类名与文本内容一致，该方案即可零成本扩展至任意数量选项，是嵌入式 SVG 交互开发的推荐范式。