jQuery点击SVG元素选中同类名元素添加类及加载失效问题

问题根源分析 #

• 加载时机问题：如果你的SVG是异步加载（比如通过<object>、embed标签嵌入，或者接口返回内容动态插入DOM），页面初始化执行代码的时候SVG内部元素还没渲染完成，直接用find查找元素绑定事件会失效，事件委托的方式兼容性更好，不需要等元素提前存在。
• 逻辑错误：你更新后的代码在遍历类名时，只要碰到类名是active就会清空所有active状态，多类名匹配的逻辑也存在问题，会出现匹配不全或者误清空的情况。

修复后可直接使用的代码 #

采用事件委托方案绑定到固定存在的父容器，完美解决SVG动态加载导致的事件失效问题，同时修正逻辑适配多类名匹配需求：

// 绑定到固定存在的父容器.mapsvg-wrap，无需等待SVG加载完成
$('.mapsvg-wrap').on('click', 'circle, ellipse, path, .program', function() {
    const $current = $(this);
    const isAlreadyActive = $current.hasClass('active');
    // 先统一清空所有已激活状态
    $('.active').removeClass('active');
    // 当前元素之前未激活时执行激活逻辑
    if (!isAlreadyActive) {
        // 过滤掉active类，拿到当前元素的所有业务类名
        const classList = $current.attr('class').split(/\s+/).filter(cls => cls !== 'active');
        // 遍历类名，给所有匹配该类的元素（圆形、连线、方块）加激活状态
        classList.forEach(cls => {
            $(`.${cls}`).addClass('active');
        });
    }
});

特殊场景适配（SVG用object标签嵌入） #

如果你的SVG是通过<object>标签嵌入页面的，需要拿到object内部的文档对象才能操作SVG元素，适配代码如下：

// 等object标签加载完成后再绑定事件
$('object#你的SVG元素ID')[0].addEventListener('load', function() {
    const svgInnerDoc = this.contentDocument;
    // 以SVG内部文档为上下文绑定事件
    $(svgInnerDoc).find('.mapsvg-wrap').on('click', 'circle, ellipse, path, .program', function() {
        // 同上核心逻辑
        const $current = $(this);
        const isAlreadyActive = $current.hasClass('active');
        $(svgInnerDoc).find('.active').removeClass('active');
        if (!isAlreadyActive) {
            const classList = $current.attr('class').split(/\s+/).filter(cls => cls !== 'active');
            classList.forEach(cls => {
                $(svgInnerDoc).find(`.${cls}`).addClass('active');
            });
        }
    });
});

内容的提问来源于stack exchange，提问作者801red