本文详解如何在纯 SVG 文件内嵌 JavaScript，通过 querySelector 动态识别当前激活项、计算索引并实现左右箭头驱动的环形切换，无需外部 HTML 或脚本，完美适配 嵌入场景。
本文详解如何在纯 svg 文件内嵌 javascript，通过 `queryselector` 动态识别当前激活项、计算索引并实现左右箭头驱动的环形切换，无需外部 html 或脚本，完美适配 `
在 SVG 中实现交互式元素轮播（如安全网络选择器），关键在于：完全自包含、无外部依赖、支持环形导航（wrap-around）。由于 SVG 将被嵌入 HTML 页面 via
核心思路是：利用统一 CSS 类（如 .cls-security）标记所有候选组，并通过 .on 类控制显隐；通过解析当前 .on 元素内的文本内容（如 "1"）获取逻辑序号，再结合模运算（% n）实现首尾无缝衔接。
以下为完整、健壮的实现方案：
✅ 正确的内联 JavaScript 实现
将如下脚本插入 SVG 的 <script> 标签中（替换原有空函数）：</script>
立即学习“Java免费学习笔记（深入）”；
<script><![CDATA[
function cycleLeft() {
// 获取当前高亮项（带 .on 类的 .cls-security 元素）
const current = document.querySelector("svg > .cls-security.on");
if (!current) return;
// 提取显示文本（支持数字或字母，如 "X", "1", "2"…）
const textElem = current.querySelector("text");
const label = textElem ? textElem.textContent.trim() : "";
// 解析为数字；若为非数字（如 "X"），映射为 0（对应 net-0）
let currentIndex;
if (label === "X") {
currentIndex = 0;
} else {
currentIndex = parseInt(label, 10);
}
// 计算左移后索引：(n - 1 + 9) % 9 → 安全处理负数取模
const nextIndex = (currentIndex - 1 + 9) % 9;
// 移除当前高亮
current.classList.remove("on");
// 查找目标元素并添加 .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 textElem = current.querySelector("text");
const label = textElem ? textElem.textContent.trim() : "";
let currentIndex;
if (label === "X") {
currentIndex = 0;
} else {
currentIndex = parseInt(label, 10);
}
// 右移：(n + 1) % 9
const nextIndex = (currentIndex + 1) % 9;
current.classList.remove("on");
const target = document.querySelector(`svg > .cls-security.net-${nextIndex}`);
if (target) {
target.classList.add("on");
}
}
]]></script>? 为什么用 svg > .cls-security.net-N 而非仅 .net-N？
使用 svg > 显式限定作用域，避免意外匹配到嵌套结构中的同名类（如按钮内部），提升选择器鲁棒性。
⚠️ 关键注意事项
- ：SVG 内联脚本在文档解析时立即执行，但若脚本位于
- CSS 优先级保障：确保 .cls-security.on { visibility: visible; } 的样式权重高于其他规则（当前示例中已满足），否则 visibility 不会生效。
-
字符兼容性：示例中 "X" 作为特殊标识，代码显式处理了该情况。若需扩展更多非数字标签（如 "A", "ALL"），建议统一维护一个映射表或改用 data-index 属性替代文本解析，更可靠：
<g class="cls-security net-0" data-index="0">...</g> <!-- 对应 JS 中：const idx = parseInt(current.getAttribute('data-index'), 10); --> - 性能与可维护性：本方案基于 querySelector，简洁直观；若元素数量极多（>100），可预先缓存元素列表（如 const items = Array.from(document.querySelectorAll(".cls-security"));），避免重复查询。
✅ 最终效果验证
点击左箭头时，高亮从 net-1 → net-0（即 "X"）→ net-8 → net-7… 循环；右箭头则反向递增，严格满足“首尾相连”需求。所有逻辑封装于 SVG 内部，导出即用，零配置接入任意网页。
此方案不仅解决了原始问题，更提供了可扩展、易调试、符合 SVG 规范的最佳实践路径。
