SVG 详解——自定义可点击的中国地图

Posted 2023-02-14 xyTianZhao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SVG 详解——自定义可点击的中国地图相关的知识，希望对你有一定的参考价值。

SVG 详解——自定义可点击的中国地图

SVG

定义

SVG 是一种图像文件格式，类似于 JPG、PNG。只不过 JPG 和 PNG 这种文件需要图像引擎加载，而 SVG 则是由画布来加载的。

它的英文全称为 Scalable Vector Graphics，意思就是可缩放的矢量图形。可让你设计无损失、高分辨率的 Web 页面图像。猿猿们就可以用代码来描绘图像，不管怎么缩放都始终保持高清显示，不会模糊。是不是很牛逼。

特性

SVG 是纯粹的 XML 文件，所以可以被很多工具打开，最常见的记事本都可以。
SVG 与 JPG、GIF 图像比起来，尺寸更小，可压缩性更强
SVG 支持缩放
SVG 图像在任何分辨率下都可以高清的显示
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可以自定义的，可以融入自己的代码

作用

App 图标：在 android 23 之后，App 的启动图标就已经替换为 SVG 了
自定义控件：不规则的控件、复杂的交互逻辑、子控件重叠判断、图标等都可以用 SVG 来实现
复杂的动画效果，如下拉刷新顶部的动画

语法

标识	对应 Path 方法	功能
M	moveto(x,y)	将画笔移动到指定坐标
L	lineto(x,y)	画直线到指定坐标位置
H	horizontal lineto(x,y)	画水平线到指定坐标位置
V	vertical lineto(x,y)	画垂直线到指定的Y坐标位置
C	curveto(x1,y1,x2,y2,endx,endy)	三阶贝塞尔曲线
Q	quadratic curveto(x2,y2,endx,endy)	二阶贝塞尔曲线
S	smooth curveto(x2,y2,endx,endy)	贝塞尔曲线
Z	closepath()	关闭路径

这里我们展示一个向右的箭头的 SVG 代码，其中的android:pathData就是根据 SVG 语法生成的路径信息，Cavans 可根据这个 path 绘制出相应的图形

<vector android:height="24dp" android:tint="#0A42BB"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</vector>

SVG 实战案例之中国地图

今年我们见过太多的飞檐患者数据的实时地图，不过发现基本上都是通过 Web 实现的。

如果用 Android 该怎么实现，还好产品没有提相应的需求，要不然又要脑瓜疼了~

防患于未然，我扒了一下 Web 的实现，发现他们用的竟然是 SVG 实现的，怪怪~你都可以那我大 Android 没理由不可以。Web 实现可以根据 JsMap 插件去搜索相关使用方法。

这里我将 Web 中的 SVG 数据做了相应的处理，转换成 Json 了，方便进行使用，数据太多，贴了一部分，想要全部的可以在底部所有代码中找。

[
    
        "name": "黑龙江",
        "textPosition": [490,82],
        "svg": "M464.838,96.639l6.787-1.19l2.854,5.241l4.285,3.095l2.856-1.188h2.386l4.285-2.501l3.094,3.094l2.024,0.357l5.357-2.023l3.813,2.023l1.666,4.288h2.857l1.43,1.904l3.689,4.049l1.426-0.833l-0.594-5.12l2.026-1.432l2.854,5.716l2.621,1.074l2.858,3.212l2.021-0.357l0.836-1.427l4.523-5.12l2.022,1.428l1.43-2.022l1.431,2.619l4.283,1.429h2.86l2.07,0.088l-1.238-2.113l-0.598-6.906l-5.115-7.978l2.855-2.857l2.616-4.883h9.646l1.785-1.665l-0.597-3.69l2.025-3.691l-0.596-2.024l0.832-3.451l-0.236-17.742l2.855-5.715l-3.214-3.692l0.595-2.261l-1.427-2.024l-3.69,1.429l-4.289,4.884l-4.283,2.023l-4.289,5.951l-10.598,3.692l-4.879-3.692l0.594-2.262l-2.5-3.689l-1.191-3.811l-4.047-0.239l-7.145-3.69l-2.859,1.071l-3.33-1.667l-4.887,0.834l-4.283-1.429l-2.621-3.69l-2.498-2.857l-0.951-2.857l-3.334-3.452l-2.026-3.099l-4.644-6.31l-1.428-3.69l-5.119-6.548l-1.432-3.454l-6.549-3.216l-4.287,1.429l-3.689-0.833l-8.336-1.668l-11.07,3.932l-2.024,1.786l2.262,3.096l-2.856,7.499l0.834,0.835l4.881,3.096l2.621-4.286l4.524,2.856l-0.235,2.022l1.664,5.119l2.854,3.218l5.717,0.833l1.668-1.787l3.451-0.477l6.547-5.476l8.576,6.31l-2.858,11.669l0.594,8.333v5.119l-2.26,1.191l-0.238,13.335l-0.597-0.476l-2.26-2.858h-1.192l-0.595,1.073c0,0-8.797,13.044-7.146,10.596c1.652-2.448-3.451,4.523-3.451,4.523l0.357,1.428l7.145,4.886l3.926-1.071l0.599,1.071l-0.834,1.189l-3.689,1.667l-0.359,3.214L464.838,96.639z"
    ,
    ......
    
        "name": "澳门",
        "textPosition": [405,432],
        "svg": "M412.032,413.183l-0.96,1.752c0,0,0.889,0.883,3.98,1.086s5.995-0.493,5.995-0.493L410.032,420.183z"
    
]

数据有了，怎么将 SVG 转换成的 Json 数据在转换成 Path 进行绘制呢，这就用到了 PathParser 这个类

public class PathParser 
    /**
     * @param pathData The string representing a path, the same as "d" string in svg file.
     * @return the generated Path object.
     * 将传入的 pathData 转换成 Path 并返回
     * 而这个 pathData 就是我们上面 Json 数据中的 svg 字段的值
     */
    public static Path createPathFromPathData(String pathData) 
        Path path = new Path();
        PathDataNode[] nodes = createNodesFromPathData(pathData);
        if (nodes != null) 
            try 
                PathDataNode.nodesToPath(nodes, path);
             catch (RuntimeException e) 
                throw new RuntimeException("Error in parsing " + pathData, e);
            
            return path;
        
        return null;

实现步骤

将 Json 转换成相应的省份数据 bean
计算地图宽高，并以此计算缩放比例
绘制省份地图
绘制省份名称

相应的注释已经在代码中标注了，直接贴代码

package com.silence.chinamap

import android.annotation.SuppressLint
import android.content.Context
import android.content.res.TypedArray
import android.graphics.*
import android.util.AttributeSet
import android.util.Log
import android.view.MotionEvent
import android.view.View
import androidx.core.graphics.PathParser
import org.json.JSONArray
import org.json.JSONObject
import kotlin.math.max
import kotlin.math.min

/**
 * Author silence.
 * Time：2020-04-13.
 * Desc：中国地图
 */
class ChinaMapView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) 

    private var showProvinceName: Boolean = true//是否显示省份名
    private var provinceNameColor: Int = Color.parseColor("#000000")//省份名颜色
    private var provinceNameSize: Float = 15f//描边颜色
    private var fillColor: Int = Color.parseColor("#3F99F9")//默认填充颜色
    private var selectColor: Int = Color.parseColor("#FF164C")//选中颜色
    private var outlineColor: Int = Color.parseColor("#FFFFFF")//描边颜色

    private val provinceList = ArrayList<ProvinceBean>()
    private val paint = Paint()
    private var mapWidth = 0f//地图原宽度
    private var mapHeight = 0f//地图原高度
    private var scale = 1f//地图缩放大小

    init 
        attrs?.apply 
            val typedArray = context.obtainStyledAttributes(attrs,R.styleable.ChinaMapView)
            showProvinceName = typedArray.getBoolean(R.styleable.ChinaMapView_show_province_name,true)
            provinceNameColor = typedArray.getColor(R.styleable.ChinaMapView_province_name_color,Color.parseColor("#000000"))
            provinceNameSize = typedArray.getFloat(R.styleable.ChinaMapView_province_name_size,15f)
            fillColor = typedArray.getColor(R.styleable.ChinaMapView_fill_color,Color.parseColor("#3F99F9"))
            selectColor = typedArray.getColor(R.styleable.ChinaMapView_select_color,Color.parseColor("#FF164C"))
            outlineColor = typedArray.getColor(R.styleable.ChinaMapView_outline_color,Color.parseColor("#FFFFFF"))
            typedArray.recycle()
        
        initProvinceData()
        postInvalidate()
    

    /**
     * 初始化省份数据
     */
    private fun initProvinceData() 
        val provinceArray = JSONArray(CHINA_SVG_JSON)
        var left = -1f
        var right = -1f
        var top = -1f
        var bottom = -1f
        val rect = RectF()
        for (i in 0 until provinceArray.length()) 
            val provinceData = provinceArray.optJSONObject(i)
            val path: Path = PathParser.createPathFromPathData(provinceData.optString("svg"))
            val name = provinceData.optString("name")
            val namePosition = FloatArray(2).apply 
                val positionArray = provinceData.getJSONArray("textPosition")
                this[0] = positionArray.optInt(0).toFloat()
                this[1] = positionArray.optInt(1).toFloat()
            
            path.computeBounds(rect, true)
            left = if (left == -1f) rect.left else min(left, rect.left)
            right = if (right == -1f) rect.right else max(right, rect.right)
            top = if (top == -1f) rect.top else min(top, rect.top)
            bottom = if (bottom == -1f) rect.bottom else max(bottom, rect.bottom)
            provinceList.add(ProvinceBean(path, name, namePosition))
        
        //计算地图的宽高
        mapWidth = right - left
        mapHeight = bottom - top
    


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) 
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val viewWidth = MeasureSpec.getSize(widthMeasureSpec)
        val viewHeight = MeasureSpec.getSize(heightMeasureSpec)
        //根据地图的宽高和view的宽高计算缩放比例
        scale = min(viewWidth / mapWidth, viewHeight / mapHeight)
    

    override fun onDraw(canvas: Canvas?) 
        super.onDraw(canvas)
        canvas?.apply 
            scale(scale, scale)
            //绘制地图
            provinceList.forEach 
                it.drawArea(this, paint, fillColor, selectColor, outlineColor)
            
            if (showProvinceName) 
                //绘制省份名称
                provinceList.forEach 
                    it.drawName(this, paint, provinceNameColor, provinceNameSize)
                
            
        

    

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent?): Boolean 
        event?.let 
            var needInvalidate = false
            provinceList.forEach 
                //判断触摸点的坐标是否在当前省份区域内
                if (it.isSelect((event.x / scale).toInt(), (event.y / scale).toInt())) 
                    needInvalidate = true
                
            
            if (needInvalidate) 
                postInvalidate()
                return true
            
        
        return super.onTouchEvent(event)
    



private class ProvinceBean(
    private val path: Path,
    private val name: String,
    private val namePosition: FloatArray,
    private var select: Boolean = false
) 

    /**
     * 绘制省份名称
     */
    fun drawName(
        canvas: Canvas, paint: Paint,
        provinceNameColor: Int, provinceNameSize: Float
    ) 
        paint.apply 
            color = provinceNameColor
            textSize = provinceNameSize
            style = Paint.Style.FILL
            canvas.drawText(name, namePosition[0], namePosition[1], this)
        
    

    /**
     * 绘制省份区域
     */
    fun drawArea(
        canvas: Canvas, paint: Paint, fillColor: Int, selectColor: Int, outlineColor: Int
    ) 
        if (select) 
            //选中
            paint.apply 
                //绘制内部颜色
                clearShadowLayer()
                strokeWidth = 1f
                color = selectColor
                style = Paint.Style.FILL
                canvas.drawPath(path, paint)
                //绘制描边
                style = Paint.Style.STROKE
                setShadowLayer(8f, 0f, 0f, 0xfff)
                color = outlineColor
                canvas.drawPath(path, paint)
            
         else 
            //未选择
            paint.apply 
                //绘制内部颜色
                clearShadowLayer()
                strokeWidth = 1f
                color = fillColor
                style = Paint.Style.FILL
                canvas.drawPath(path, paint)
                //绘制描边
                style = Paint.Style.STROKE
                setShadowLayer(8f, 0f, 0f, 0xfff)
                color = outlineColor
                canvas.drawPath(path, paint)
            
        
    

    fun isSelect(x: Int, y: Int): Boolean 
        val rect = RectF()
        path.computeBounds(rect, true)
        val region = Region()
        region.setPath(
            path, Region(
                rect.left.toInt(), rect.top.toInt(),
                rect.right.toInt(), rect.bottom.toInt()
            )
        )
        select = region.contains(x, y)
        return select
    

//地图的 svg 数据
private const val CHINA_SVG_JSON =
    "[\\"name\\":\\"黑龙江\\",\\"textPosition\\":[490,82],\\"svg\\":\\"M464.838,96.639l6.787-1.19l2.854,5.241l4.285,3.095l2.856-1.188h2.386l4.285-2.501l3.094,3.094l2.024,0.357l5.357-2.023l3.813,2.023l1.666,4.288h2.857l1.43,1.904l3.689,4.049l1.426-0.833l-0.594-5.12l2.026-1.432l2.854,5.716l2.621,1.074l2.858,3.212l2.021-0.357l0.836-1.427l4.523-5.12l2.022,1.428l1.43-2.022l1.431,2.619l4.283,1.429h2.86l2.07,0.088l-1.238-2.113l-0.598-6.906l-5.115-7.978l2.855-2.857l2.616-4.883h9.646l1.785-1.665l-0.597-3.69l2.025-3.691l-0.596-2.024l0.832-3.451l-0.236-17.742l2.855-5.715l-3.214-3.692l0.595-2.261l-1.427-2.024l-3.69,1.429l-4.289,4.884l-4.283,2.023l-4.289,5.951l-10.598,3.692l-4.879-3.692l0.594-2.262l-2.5-3.689l-1.191-3.811l-4.047-0.239l-7.145-3.69l-2.859,1.071l-3.33-1.667l-4.887,0.834l-4.283-1.429l-2.621-3.69l-2.498-2.857l-0.951-2.857l-3.334-3.452l-2.026-3.099l-4.644-6.31l-1.428-3.69l-5.119-6.548l-1.432-3.454l-6.549-3.216l-4.287,1.429l-3.689-0.833l-8.336-1.668l-11.07,3.932l-2.024,1.786l2.262,3.096l-2.856,7.499l0.834,0.835l4.881,3.096l2.621-4.286l4.524,2.856l-0.235,2.022l1.664,5.119l2.854,3.218l5.717,0.833l1.668-1.787l3.451-0.477l6.547-5.476l8.576,6.31l-2.858,11.669l0.594,8.333v5.119l-2.26,1.191l-0.238,13.335l-0.597-0.476l-2.26-2.858h-1.192l-0.595,1.073c0,0-8.797,13.044-7.146,10.596c1.652-2.448-3.451,4.523-3.451,4.523l0.357,1.428l7.145,4.886l3.926-1.071l0.599,1.071l-0.834,1.189l-3.689,1.667l-0.359,3.214L464.838,96.639z\\",\\"name\\":\\"吉林\\",\\"textPosition\\":[490,130],\\"svg\\":\\"M544.896,113.042l-2.07-0.088h-2.858l-4.285-1.431l-1.43-2.619l-1.431,2.024l-2.022-1.428l-4.523,5.12l-0.834,1.427l-2.022,0.357l-2.859-3.214l-2.621-1.072l-2.854-5.715l-2.027,1.431l0.594,5.12l-1.426,0.833l-3.689-4.05l-1.432-1.903h-2.854l-1.666-4.288l-3.813-2.023l-5.354,2.023l-2.025-0.357l-3.098-3.094l-4.285,2.5h-2.383l-2.857,1.191l-4.285-3.096l-2.854-5.24l-6.787,1.189l-2.621,3.099l-0.238,3.45l-7.502-2.023l-1.074,2.381l0.601,1.667l3.928,2.859v4.046l0.594,3.929l2.265,3.456l0.356,3.095l1.666,1.191l5.717-5.479l5.953,7.502v4.288l3.213,1.667l0.238-1.431l4.885,1.431l3.451,4.046l1.666-1.784l0.357-1.074l8.217,11.075l0.594,4.286l4.527,5.239l0.592,4.761l4.051-2.499l3.689-10.598l1.67-0.595l4.047,2.263l6.549-0.834l2.26-2.024l-3.092-4.763l0.832-1.191c0,0,7.84-2.611,6.072-2.022c-1.766,0.588,2.5-4.883,2.5-4.883l3.215-1.428l0.238-4.766l0.832-3.212l1.785-0.596l1.668,1.789l1.668,1.426l4.287-5.715l1.188-4.288L544.896,113.042z\\",\\"name\\":\\"辽宁\\",\\"textPosition\\":[467,160],\\"svg\\":\\"M491.15,173.2l6.783-10.002l4.287-4.881l-0.595-4.763l-4.524-5.239l-0.594-4.286l-8.216-11.075l-0.358,1.074l-1.666,1.786l-3.453-4.05l-4.883-1.429l-0.236,1.429v2.264l-2.022,2.022l-4.047,4.05H467.1l-1.666,2.856h-1.789l-3.094,3.096h-1.787l-3.691,3.691l-2.262,0.596l-4.881,7.5l-3.096-4.644l-3.453-2.262l-1.666,1.667l1.903,10.002l-1.666,3.453l-1.668,5.12l4.763,3.215l2.621,0.238l3.45,4.881l2.5-1.429c0,0,2.857-2.881,4.05-4.882c1.192-2.002,4.049-6.788,4.049-6.788l6.787-1.429l4.287,4.286l-3.099,6.787l-4.049,6.311l3.688,2.62l-0.233,3.098l-2.857,2.855l0.597,1.19l4.881-2.619l7.143-9.407l10.836-6.072L491.15,173.2z\\",\\"name\\":\\"内蒙古\\",\\"textPosition\\":[370,156],\\"svg\\":\\"M301.969,226.604l3.438-0.779l2.859-1.188l4.762-3.932l0.953-6.31l2.855-9.168l5.954-4.048l0.835,0.951l1.786,6.19l-2.858,4.049l-0.594,3.691l9.168,3.453l0.832,2.621l5.358-0.359l2.617,0.596l1.191,0.834l9.405-13.454l2.502-0.835l0.593-1.664l-0.236-2.623l3.096-4.523l6.072-0.358l2.262-2.5l1.431,1.074l3.452-2.86h1.904l6.312-9.046l3.215,0.235l3.93-2.855l1.191,1.189l7.381-3.809l-3.689-6.193l1.189-6.311l3.096-6.549l2.619-1.188l1.666,0.832v4.644l2.025,1.43l4.526-3.453l2.021-2.026l2.022,0.835l2.265-2.025l4.881-0.234l0.834-1.667l-1.191-2.622l3.453-3.452l4.049-2.024l6.31,6.908l-0.355,2.618l3.213,4.763l7.385,0.595l1.666-3.453l-1.903-10.002l1.666-1.667l3.453,2.262l3.096,4.644l4.881-7.5l2.264-0.596l3.689-3.692h1.787l3.094-3.095h1.787l1.666-2.856h4.527l4.047-4.051l2.021-2.021v-2.264l-3.213-1.667v-4.286l-5.953-7.502l-5.717,5.478l-1.666-1.19l-0.357-3.096l-2.264-3.453l-0.594-3.931v-4.046l-3.928-2.858l-0.601-1.667l1.074-2.382l7.502,2.022l0.238-3.452l2.621-3.099l-1.789-1.666l0.358-3.214l3.689-1.667l0.834-1.19l-0.598-1.07l-3.927,1.07l-7.145-4.882l-0.357-1.43l3.453-4.524l7.146-10.597l0.594-1.072h1.193l2.26,2.858l0.596,0.479l0.238-13.336l2.26-1.191v-5.121l-0.594-8.333l2.858-11.668l-8.575-6.312l-6.548,5.478l-3.45,0.476l-1.668,1.786l-5.718-0.832l-2.854-3.215l-1.664-5.122l0.236-2.021l-4.525-2.858l-2.621,4.289l-4.881-3.096l-0.834-0.835l2.856-7.5L433.4,7.223h-2.024l-5.119,3.688l-4.285,6.311l1.668,1.071l3.211,0.359l2.504,6.548l-1.43,2.618l-2.502,3.689l-4.644,17.147l1.785,2.856l-1.428,2.498l-10.599,7.742l-5.713-1.071l-3.215-1.191l-0.479,1.667l-4.642,18.577l-2.264,2.378l1.191,3.335l2.854,2.382l4.764-2.623l7.74,0.598l2.26-3.692l4.052-0.951l7.737,2.856l9.408,9.765v2.023l-2.024,1.429l-10.836,0.599l-3.691,2.854l-2.857-0.355l-2.022,3.214l-5.121,1.07l-3.457,5.12l-0.592,3.81l-7.379,4.763l-4.646,0.598l-5.119,6.904l-4.883,2.859l-9.408-2.025l-3.092-1.431l-3.692,3.694l-1.785,6.548l5.119,7.501l-3.335,3.451l-4.643,2.859c0,0-8.422,10.638-6.787,8.571c1.637-2.064-6.619,3.36-8.93,3.93c-2.31,0.568-14.525,1.429-14.525,1.429l-2.264-0.237l-16.906,7.144l-7.742,4.881l-2.262-1.19l-0.83-2.262l-10.36-0.597l-11.909-3.688l-3.211-3.69l-17.385-2.025l-3.217,1.43l-21.072-2.022l-0.358,3.095l1.43,4.883l-0.834,7.976l6.073,8.929l3.096,2.026l4.883-3.812h10.237l2.623,0.953l1.426,2.262l-1.19,2.5l-5.714,4.646l0.597,2.261l6.549,4.88h2.618l0.834,1.072l-0.596,2.023l4.05,3.217l9.403,1.429l4.527-1.19l5.716-5.719l6.903,0.598l2.857,4.289l-1.664,3.926l0.473,2.382l-3.688,2.263l-1.668,2.024l0.596,4.76l6.545,4.647L301.969,226.604z\\",\\"name\\":\\"河北\\",\\"textPosition\\":[399,210],\\"svg\\":\\"M413.04,235.229l0.357-1.426l-1.783-3.453l6.902-12.5c0,0,8.725-7.9,6.313-5.718c-2.411,2.185,4.523-1.188,4.523-1.188l4.268-5.423l-1.647-1.125l-1.56-3.907l-3.319,1.286l-5.479-1.428l-0.237-1.428l-0.238-9.17l3.69-1.667l-0.419-1.563l-0.177-0.104l0.81-3.557l-5.094,2.128l0.832,1.905l0.178,1.424l0.18,1.433l-2.857,1.19l-1.785,1.667l-3.692-1.071l-4.881,0.834l-0.832-2.264l0.594-4.287l3.693-4.286l0.831-4.88l3.691-3.691l6.666,3.454h1.668l1.189,4.762l1.905,0.95l0.953,3.1l-0.356,2.024l4.047,2.854l0.594,2.264l3.338,1.428l8.332-4.523v-2.621l4.883-7.143l-3.45-4.881l-2.621-0.238l-4.763-3.218l1.668-5.118l-7.387-0.595l-3.213-4.765l0.357-2.619l-6.31-6.906l-4.051,2.026l-3.451,3.452l1.191,2.62l-0.834,1.667l-4.882,0.237l-2.264,2.022l-2.022-0.835l-2.021,2.026l-4.527,3.453l-2.024-1.43v-4.644l-1.666-0.832l-2.619,1.189l-3.096,6.547l-1.189,6.311l3.689,6.19l3.215,2.858v5.24l1.904,4.286l-0.834,4.764l-4.884,3.213l-2.26,7.382l4.049,4.645l2.857,5.717l-1.785,2.857l-0.477,3.928l-1.787,2.619l-0.834,2.859l2.621,3.446l11.43,1.431l4.524-1.787L413.04,235.229z\\",\\"name\\":\\"北京\\",\\"textPosition\\":[410,182],\\"svg\\":\\"M421.139,189.75l-0.357-2.856l-0.832-1.905l5.095-2.126l0.381-1.683l-1.189-4.767h-1.668l-6.666-3.449l-3.69,3.69c0,0-1.125,6.585-0.832,4.88c0.289-1.704-3.693,4.288-3.693,4.288l-0.594,4.286l0.832,2.263l4.881-0.834l3.693,1.071l1.784-1.667L421.139,189.75z\\",\\"name\\":\\"天津\\",\\"textPosition\\":[432,200],\\"svg\\":\\"M430.413,200.491c0,0-1.832,1.672-3.319,1.284c-1.49-0.388-5.479-1.428-5.479-1.428l-0.237-1.429l-0.238-9.169l3.69-1.667l-0.596-1.666l0.81-3.557l0.385-1.683l1.901,0.95l0.953,3.098l-0.356,2.022l4.047,2.858l0.594,2.263l-2.379,1.668l-0.834,3.809L430.413,200.491z\\",\\"name\\":\\"河南\\",\\"textPosition\\":[385,270],\\"svg\\":\\"M371.131,276.068l9.405,8.336l7.742,1.665l7.144-1.072l2.262,1.072l2.5-1.43l1.783,1.787l0.834,2.856l3.455,1.905h4.524l3.451,2.857l3.098-1.428l2.382,1.428l1.903-3.929l2.855-1.43l0.598-3.216l-1.07-5.715l-0.596-0.479l-2.856,2.86l-4.287-3.453l-3.218-4.049l3.218-2.263l0.834-4.048l2.021-1.431l-0.354-5.359l1.43-1.188l2.619,1.787l1.664,2.26l3.455-2.26l1.19-1.434l-0.598-2.617l-4.049-2.263l-0.834-2.619l-7.142,0.835l-4.524-3.93l-2.021-0.596v-2.621l10-11.074l-3.69,0.834l-2.261,1.669l-0.957-1.429v-1.666l-1.663-0.6l-4.525,1.785l-11.43-1.428l-0.597,9.408c0,0-6.604,5.169-5.479,4.287c1.129-0.884-7.381,1.429-7.381,1.429l-10.359,7.142l-8.215,2.264v1.43l7.738,11.666L371.131,276.068L371.131,276.068z\\",\\"name\\":\\"山东\\",\\"textPosition\\":[427,235],\\"svg\\":\\"M425.661,252.611l0.597-2.856l2.5-1.069l4.645,3.927h1.433l4.284-0.476l2.5-2.022l3.453,2.856l1.429-2.62l0.356-1.43l2.857-1.667l0.834-3.45l2.854-0.595l7.98-13.454l-1.429-2.264l1.429-1.427l1.666,0.595l2.619-1.429l1.432-3.094l6.545-6.073l5.121-1.666l2.381-2.266l-0.592-4.88l-3.457-0.355l-7.738,0.952l-5.356-2.62l-3.216,0.596l-7.977,10.239l-2.262,1.429l-5.117-2.263l-0.359-2.619l-1.069-4.523l-2.859-1.669l-4.643,1.073l-2.882-1.971l-4.266,5.423l-4.523,1.188c0,0-8.514,7.798-6.313,5.718c2.201-2.081-6.902,12.5-6.902,12.5l1.783,3.45l-0.357,1.431v1.666l0.957,1.429l2.261-1.669l3.69-0.834l-10.002,11.074v2.621l2.023,0.596l4.524,3.93l7.146-0.835L425.661,252.611z\\",\\"name\\":\\"山西\\",\\"textPosition\\":[366,230],\\"svg\\":\\"M363.393,259.519l8.217-2.265l10.357-7.142l7.381-1.431l5.477-4.287l0.599-9.405l-2.623-3.449l0.836-2.856l1.787-2.619l0.477-3.929l1.785-2.86l-2.859-5.713l-4.047-4.645l2.262-7.383l4.886-3.212l0.83-4.765l-1.904-4.286v-5.242l-3.215-2.854l-7.381,3.809l-1.191-1.189l-3.93,2.855l-3.213-0.235l-6.312,9.048h-1.906l-3.452,2.858l0.237,4.046l-1.67,3.452l-0.594,4.525l-3.096,4.884l3.334,6.905l-1.07,3.929l-2.619,4.286c0,0,4.146,18.996,3.689,16.903s-2.498,8.81-2.498,8.81L363.393,259.519z\\",\\"name\\":\\"江苏\\",\\"textPosition\\":[450,270],\\"svg\\":\\"M483.646,282.616l-1.426,4.286l-1.898,2.251l-3.225,3.824l-4.879-0.835l-3.929-2.383l-2.383,1.19l-8.571-0.832l-0.238-3.454l-4.287-2.856l-1.428-2.618l2.02-2.264v-1.665v-2.267l5.121-0.594l0.24-2.023l-1.666-2.263l-2.621-0.355l-1.666,2.854l-4.287-0.831l-1.188-2.263l-2.857-1.666l0.955-6.074l-0.598-1.072l-2.859,0.479l-2.021-1.667l-5.118-1.429l-2.861-2.857l-6.307-2.621l0.592-2.856l2.5-1.069l4.645,3.927h1.433l4.284-0.476l2.5-2.022l3.453,2.856l1.427-2.62l0.358-1.43l2.857-1.667l0.834-3.45l2.854-0.597l7.148,4.881c0,0,3.365,0.754,5.117,2.025c1.754,1.271,9.766,16.313,9.766,16.313l-0.357,1.666l6.548,3.095l1.784,2.859l3.099,1.429l1.428,2.855l-2.023,0.951l-3.334-1.188h-4.645l-4.287-1.432l-1.666,1.432l3.932,1.188l3.813,1.669L483.646,282.616z\\",\\"name\\":\\"安徽\\",\\"textPosition\\":[430,299],\\"svg\\":\\"M423.637,253.208l2.024-0.597l6.312,2.621c0,0,1.768,2.299,2.861,2.856c1.092,0.557,5.118,1.43,5.118,1.43l2.021,1.667l2.858-0.479l0.599,1.072l-0.957,6.074l2.858,1.666l1.189,2.263l4.287,0.831l1.666-2.854l2.621,0.356l1.666,2.265l-0.24,2.021l-5.121,0.596v2.264v1.665l-2.021,2.265l1.43,2.618l4.287,2.856l0.237,3.454l8.572,0.832v4.525l-1.666,2.381l1.191,2.263l-0.951,1.43l-3.338,0.594l-1.428,1.906l0.235,4.882l-4.285,6.072l-0.715,0.683l-2.381-2.111H446.5l-2.498-2.855l-4.884,4.761l-1.786-0.834l2.026-3.69l-0.24-1.188l-1.786-0.479l-5.718,3.099l-5.356-10.241l1.666-3.214l-0.595-1.071l-2.858-0.952l-4.76-2.858l1.903-3.928l2.855-1.43l0.598-3.214l-1.07-5.716l-0.596-0.479l-2.856,2.86c0,0-5.978-4.647-4.287-3.453c1.69,1.192-3.217-4.049-3.217-4.049l3.217-2.261l0.834-4.05l2.021-1.431l-0.354-5.359l1.43-1.188l2.619,1.787l1.664,2.26l3.453-2.26l1.192-1.434l-0.598-2.617l-4.049-2.263L423.637,253.208z\\",\\"name\\":\\"湖北\\",\\"textPosition\\":[380,308],\\"svg\\":\\"M356.486,329.29l1.787-4.048l5.119-4.287l4.881,2.026l3.096-2.026l-2.621-3.093l1.429-1.433l13.219,0.836l4.525,3.097l2.264,1.425l3.451-2.26l2.619-0.833l0.596,3.093h1.904l1.43-2.021l2.856-2.86l1.431,2.027v4.049l1.19,1.667l2.619,0.594l2.855-2.854l4.287-1.433l7.979-7.381l3.691,0.236l4.522-1.428l-5.358-10.24l1.668-3.214l-0.593-1.071l-2.862-0.952l-4.761-2.858l-2.381-1.427l-3.098,1.427l-3.451-2.854h-4.524l-3.455-1.907l-0.83-2.856l-1.787-1.786l-2.5,1.428L395.421,285c0,0-9.509,0.927-7.146,1.071c2.363,0.146-7.736-1.666-7.736-1.666l-9.407-8.334l-2.619,2.023l-1.188-0.831h-1.907h-8.572l-1.189,1.068l2.619,2.62l2.5,0.593l2.26,0.837l-1.067,1.668l-4.287,2.021l-0.834,3.451l0.834,1.191l0.596,4.288l2.5,0.238l2.619,3.452l1.07,6.548l-0.832,2.262l-1.666-0.594l-4.883,3.812l-8.336,1.429l-2.261,2.263l1.783,2.262l0.24,4.882l2.262,0.598L356.486,329.29z\\",\\"name\\":\\"浙江\\",\\"textPosition\\":[462,320],\\"svg\\":\\"M483.793,336.063l-6.455,2.276l-3.693-3.69l-2.498,3.215h-4.049l-1.666-3.454l-2.023-5.118l-3.692-0.596l-4.047-7.501l-2.619-3.69l1.903-1.818l0.716-0.685c0,0,6.241-8.84,4.286-6.07c-1.954,2.769-0.239-4.882-0.239-4.882l1.43-1.906l3.336-0.594l0.951-1.43l-1.189-2.263l1.666-2.382v-4.524l2.384-1.189l3.928,2.382l4.879,0.835l3.225-3.824l3.998,3.332l-1.744,1.324l-2.021,3.096l-3.217,0以上是关于SVG 详解——自定义可点击的中国地图的主要内容，如果未能解决你的问题，请参考以下文章 
 使用 SVG、HTML/CSS、ImageMap 创建带有可点击省份/州的地图
 使用svgdeveloper 和 svg-edit 绘制svg地图
 Echarts 地图 省份的颜色自定义如何设置？
 Echarts 地图 省份的颜色自定义如何设置？
 Echarts 地图 省份的颜色自定义如何设置？
 中国地图点击下钻到省份（含html源码，可直接运行，令含各省份json,全国json）