利用H5实现svg图片中各部分监听事件

目录

0.前言

1.效果图

2.图片格式SVG

3.实现原理

[3.1 H5标签引入svg图片](#3.1 H5标签引入svg图片)

[3.2 对进行加载和点击监听](#3.2 对进行加载和点击监听)

---

0.前言

ui设计了一张3D地图，需要进行地图地区中点击的交互，直接用echarts地图实现效果没设计图那么好，所以搜了下，利用canvas绘制比较好实现，但是ui不好导出canvas数据，只能提供svg格式的图片，试了下，SVG格式图片也能实现。

1.效果图

监听地图中各部分区域，输出对应区域

2.图片格式SVG

首先是ui提供svg格式的图片，看一下图片格式，应该是每个区域对应不同path，里面的id或者属性都可以自定义设置，例如给data-xxx属性之类，用于区分path。

3.实现原理

3.1 H5标签<object>引入svg图片

• 基本语法：

<object id="map" style="opacity: 1;" data="map.svg" type="image/svg+xml" width="1920" height="1080"></object>

• 属性说明：

1. type ：必须设置为"image/svg+xml"，表明引入的是SVG格式

2. data：指定SVG文件的路径（相对路径或绝对路径）

3. width/height：设置SVG的显示尺寸（单位可以是px、em或百分比）

3.2 对<object>进行加载和点击监听

// 获取嵌入在HTML中的SVG对象，这里假设其ID为'map'
const obj = document.getElementById('map');

// 为SVG对象添加load事件监听器，确保SVG完全加载后再进行操作
obj.addEventListener('load', function() {
    // 通过contentDocument属性获取内嵌SVG的文档对象
    const svgDoc = obj.contentDocument;
    
    // 使用querySelectorAll选择SVG中所有的path元素
    // 这些path通常代表地图中的各个区域
    const paths = svgDoc.querySelectorAll('path');

    // 遍历所有找到的path元素
    paths.forEach(path => {
        // 为每个path元素设置鼠标悬停样式为手型，表示可点击
        path.style.cursor = 'pointer';
        
        // 为每个path添加点击事件监听器
        path.addEventListener('click', function(e) {
            // 获取被点击path元素的id属性，这个id通常对应区域名称
            const regionName = this.getAttribute('id');
            
            // 在控制台输出被点击区域的名称
            console.log('点击的区域是：', regionName);
            
            // 实际应用中，这里可以添加更多交互逻辑，比如：
            // 1. 高亮显示选中的区域
            // 2. 显示该区域的详细信息
            // 3. 触发相关的数据请求
        });
    });
});

• svgDoc内容

paths内容

仅仅提供一种思路，毕竟svg图的格式中path划分因人而异，刚好ui能提供分地区的path图，可以实现地图点击交互的效果。