html 类似地图的不规则图形事件处理

需求

简单脸部分区图，点击时传递位置信息

思路

因为只有一张图片，所以目前找到的方法是使用向量图编辑工具Inkscape编辑，在分区边界加上 path, 并保存为 svg 文件。 然后将 svg 文件去掉不需要属性，直接放入小程序代码中操作。

重要的点

Inkscape的使用步骤

1.打开Inkscape 后， 文件 -> 打开 选择一张图片，界面展示如下

image.png

需注意的是导入类型建议不用内嵌的，内嵌会将图片转为base64代码，并放入svg文件；我们只引入即可。

2. 绘制相应的曲线，下图为主要操作

   
   image.png

3. 将文件保存为svg, 可以看到相应的 path 代码

<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
   ......
  <g
      id="g91"
      inkscape:label="Image"
      inkscape:groupmode="layer">
     <image
        id="image93"
        xlink:href="file:///imagePath.jpg"
        preserveAspectRatio="none"
        height="1585.3333"
        width="1109.3333" />
       <path onclick="test('area1');"
        id="area1"
        d="M 113.13164,619.24689 C 347.33398,
    .....

path的数量看绘制的数量多少，一块块的需要绘制成闭环的。
给 svg 加上简单的样式，效果是鼠标放上去，会高亮，移开后正常。就象中国地图省份的操作类似。
样式如下：

    svg { height: 50vw; }
    path { fill: #d3d3d3; transition: .6s fill; opacity: 0.6;}
    path:hover { fill: #eee;opacity: 0.6; }

注：
以上参考文章 Create responsive SVG image maps
Inkspace下载可以到 官网 找