SVG内联中国地图实现省级交互：通过带ID的path元素绑定点击事件，动态高亮并展示信息，支持CSS样式切换与颜色自定义，离线轻量、缩放不失真。
网页端用 SVG 制作交互式中国地图，核心是把省级行政区作为独立可点击区域，结合 HTML+CSS+JavaScript 实现响应、高亮、信息展示等功能。不依赖地图 API，轻量、离线可用、缩放不失真。
获取规范的中国地图 SVG 文件
选用带完整 省份 ID 或 class 标识 的 SVG 源文件，确保每个 <path></path> 元素能唯一对应一个省（如 id="guangdong" 或 class="province shandong"）。推荐来源：
- amCharts 中国地图 SVG 包（含 high/low 两版，结构清晰）
- 从 geojson.io 导出 GeoJSON 后用 Mapshaper 转为 SVG，并勾选 “Export IDs from properties” 保留省份名称
- 避免直接复制粘贴网页中已压缩、无 ID、路径合并的 SVG，否则无法精准绑定交互
嵌入页面并启用 DOM 交互能力
将 SVG 内联写入 HTML（不使用 <img src="xxx.svg" alt="网页端怎么使用 SVG 制作交互式的中国地图组件" >），这样才能用 JavaScript 访问内部元素：
<div id="map-container">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<path id="beijing" d="M..." title="北京市"/>
<path id="shanghai" d="M..." title="上海市"/>
<!-- 更多省份 path -->
</svg>
</div>关键点：
- 必须用
<svg></svg>标签内联，不能外链；否则document.getElementById("beijing")会返回 null - 每个
<path></path>建议设置id和title，便于后续读取和无障碍支持 - 添加
style="cursor: pointer;"到<path></path>或用 CSS 统一设置，提升操作反馈
绑定点击事件与动态样式响应
监听点击，获取被点击的省份，并更新视觉状态与信息面板：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const paths = document.querySelectorAll('path[id]');
const infoBox = document.getElementById('province-info');
<p>paths.forEach(path => {
path.addEventListener('click', function() {
// 清除之前高亮
paths.forEach(p => p.classList.remove('active'));
// 当前高亮
this.classList.add('active');
// 显示信息
const name = this.title || this.id;
infoBox.textContent = <code>当前选中：${name}</code>;
});
});CSS 示例（实现描边+填充变化）：
path {
fill: #d0e8f4;
stroke: #a0c0d0;
stroke-width: 0.5;
transition: all 0.2s ease;
}
path.active {
fill: #fb923c;
stroke: #ea580c;
stroke-width: 2;
}进阶可加 hover 效果、tooltip、或配合 D3.js 实现渐变着色、数据绑定等。
可选增强：颜色切换与外部控制
若需用户自定义颜色（如按 GDP 着色），可添加一组色块按钮：
<div class="color-palette"> <div class="swatch" style="background:#10b981" data-color="#10b981"></div> <div class="swatch" style="background:#8b5cf6" data-color="#8b5cf6"></div> </div>
JS 中监听色块点击，动态修改当前 active 省份的 fill：
document.querySelectorAll('.swatch').forEach(swatch => {
swatch.addEventListener('click', () => {
const color = swatch.dataset.color;
const active = document.querySelector('path.active');
if (active) active.style.fill = color;
});
});整个过程无需后端、不发请求、兼容主流浏览器，适合数据看板、政策宣导页、教育类 H5 等轻交互场景。
