网页端怎么使用 SVG 制作交互式的中国地图组件-H5教程-PHP中文网

SVG内联中国地图实现省级交互：通过带ID的path元素绑定点击事件，动态高亮并展示信息，支持CSS样式切换与颜色自定义，离线轻量、缩放不失真。

网页端怎么使用 svg 制作交互式的中国地图组件

网页端用 SVG 制作交互式中国地图，核心是把省级行政区作为独立可点击区域，结合 HTML+CSS+JavaScript 实现响应、高亮、信息展示等功能。不依赖地图 API，轻量、离线可用、缩放不失真。

获取规范的中国地图 SVG 文件

选用带完整 省份 ID 或 class 标识 的 SVG 源文件，确保每个元素能唯一对应一个省（如 id="guangdong" 或 class="province shandong"）。推荐来源：

amCharts 中国地图 SVG 包（含 high/low 两版，结构清晰）
从 geojson.io 导出 GeoJSON 后用 Mapshaper 转为 SVG，并勾选 “Export IDs from properties” 保留省份名称
避免直接复制粘贴网页中已压缩、无 ID、路径合并的 SVG，否则无法精准绑定交互

嵌入页面并启用 DOM 交互能力

将 SVG 内联写入 HTML（不使用），这样才能用 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><path id="shanghai" d="M..." title="上海市"></path><!-- 更多省份 path --></svg>
</div>

关键点：

必须用标签内联，不能外链；否则 document.getElementById("beijing") 会返回 null
每个建议设置 id 和 title，便于后续读取和无障碍支持
添加 style="cursor: pointer;" 到或用 CSS 统一设置，提升操作反馈

绑定点击事件与动态样式响应

监听点击，获取被点击的省份，并更新视觉状态与信息面板：

当前选中：${name}

CSS 示例（实现描边+填充变化）：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

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 等轻交互场景。