uni-app中直接使用标签会失效，因h5端编译器支持弱、小程序端完全不识别；应将svg作为字符串通过innerhtml注入并用原生js操作事件与样式。
uni-app 里直接用 <svg></svg> 标签会失效？
是的，多数情况下会白屏或不渲染。因为 uni-app 的 Vue 编译器（尤其是 H5 端）对原生 SVG 标签的支持很弱，v-bind 绑定属性、@click 事件在 <svg></svg> 内部子元素上经常失灵，小程序端更甚——微信小程序根本不认 <svg></svg> 标签，直接忽略。
真正能跨端稳定工作的方案，是把 SVG 当作「字符串」注入 DOM，再用原生 JS 操作。不是写在模板里，而是通过 innerHTML 或 document.createElement('div').innerHTML = svgString 插入。
- 别在
<template></template>里硬写<svg><path d="..."></path></svg>—— 这在 H5 可能勉强动一下，小程序里完全没反应 - 把 SVG 内容存成字符串变量或从接口加载，用
ref拿到容器节点后，用el.innerHTML = svgStr注入 - 注入后，用
el.querySelector('path[data-id="xxx"]')手动绑定事件，别依赖 Vue 指令
如何给 SVG 路径加点击高亮和数据绑定？
不能靠 v-for 渲染 <path></path>，也不能用 :class 动态切样式——SVG 元素不走 Vue 响应式更新流程。得用原生 class 切换 + 手动维护状态。
典型做法：给每个 <path></path> 加唯一 data-id 属性，点击时记录当前选中 ID，再遍历所有路径重设 fill 或 class。
- SVG 字符串里每个
<path></path>必须带data-id="province-01"这类可识别标识 - 点击回调里用
event.target.setAttribute('fill', '#409EFF')直接改样式，别试图触发 Vue data 更新再重 render - 如果要支持多选，用
Set存已选data-id，每次点击 toggle，再批量 setAttribute - 注意：小程序里
setAttribute对fill有效，但对class无效，所以推荐直接操作内联样式
uni-app 中 SVG 缩放/拖拽卡顿怎么办？
纯 CSS transform: scale() 在 canvas 或 webview 里表现不一致，尤其 iOS 微信小程序 WebView 对 SVG 的 transform 支持差，容易糊、闪、丢事件。真要交互流畅，得用 viewBox 动态缩放 + getBoundingClientRect() 算坐标偏移。
- 不要用
style="transform: scale(2) translateX(10px)"控制 SVG 整体，改<svg viewbox="x y w h"></svg>的四个值 - 拖拽时监听
touchmove，用event.touches[0].clientX减去初始偏移，反推 viewBox 的 x/y 值 - 缩放建议用双指 pinch 手势，通过
event.touches计算距离比，再等比缩放 viewBox 的 w/h - H5 端可加
will-change: transform提升性能；小程序端避免频繁 setAttribute，合并多次样式修改
地图 GeoJSON 怎么转成可用的 SVG 字符串？
别手写 path 数据。用现成工具转换，否则坐标错一位，整个省就歪了。关键不是“怎么转”，而是“转完怎么修”。
- 推荐用
@turf/turf的geojsonToWkt不行，它不输出 path —— 正确工具是svg-path-properties或 Python 的geojson2svg，但最稳的是在线工具mapshaper.org导出简化版 SVG - 导出后必须删掉
<defs></defs>、<style></style>、命名空间xmlns=...，只留<svg><g><path></path></g></svg>结构，否则小程序解析失败 - 路径
d属性里如果有大写字母M L Z，部分低端安卓 WebView 会解析异常，统一转小写（用正则.replace(/([A-Z])/g, ' $1').toLowerCase()） - 坐标精度保留 3～4 位小数即可，过长的 d 字符串会让小程序 setData 超限或卡顿
最麻烦的不是画出来，而是不同端对同一段 SVG 字符串的解析差异——iOS 微信能跑的，安卓 QQ 浏览器可能漏几条线。上线前务必三端实机点一遍边界区域。
