需求
简单的脸部分区图，点击时传达位置信息
想法
因为只有一张图像，所以我找到了用矢量图像编辑工具Inkscape进行编辑，在分区边界加上path，然后保存为svg文件的方法。 然后，从svg文件中删除不需要的属性，直接将其放入applet的代码中进行操作。
重点
使用Inkscape的步骤
打开Inkscape后，选择“文件”-“打开并选择图像”。 界面显示如下
image.png
建议不要对导入类型使用嵌入。 嵌入将图像转换为base64代码，并将其放入svg文件中。 我们引进来就行了。
绘制适当的曲线。 下图是主要操作
image.png
将文件另存为svg后，将显示相应的path代码
xmlns 3360 DC=' http://purl.org/DC/elements/1.1/'
.
id='g91 '
Inkscape:级别='image '
inkscape:groupmode='layer '
id='image93 '
xlink : href=' file ://image path.jpg '
preserveAspectRatio='none '
height='1585.3333 '
width='1109.3333' /
id='area1'
d=' m 113.13164，619.24689 c 347.33398，
.
path的数量根据描绘的数量而不同，1个模块的需要在闭环中被描绘。
如果给svg添加简单的样式，鼠标放置时会被高亮显示，松开后会达到正常的效果。 类似于中国地图省的操作。
样式如下。
svg { height: 50vw； }
path { fill: #d3d3d3； transition :6 s文件； opacity: 0.6； }
path:hover { fill: #eee； opacity: 0.6； }