html不规则图形坐标代码,html 类似地图的不规则图形事件处理

需求

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

思路

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

重要的点

Inkscape的使用步骤

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

image.png

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

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

image.png

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

xmlns:dc="http://purl.org/dc/elements/1.1/"

......

id="g91"

inkscape:label="Image"

inkscape:groupmode="layer">

id="image93"

xlink:href="file:///imagePath.jpg"

preserveAspectRatio="none"

height="1585.3333"

width="1109.3333" />

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; }