Html 如何在图像地图上创建不规则形状的鼠标悬停效果

如何创建鼠标悬停效果的不规则形状的图像地图？不规则形状可能非常复杂，不是多边形/矩形/三角形/圆形，而是灯笼或动物形状。这可能吗？

尝试使用科迪酸盐：

<map id="honeycomb" name="honeycomb">
    <area shape="poly" alt="" title="" coords="493,23,572,65,573,159,491,204,415,158,415,67" href="" target="" />
    <area shape="poly" alt="" title="" coords="651,22,732,66,732,158,652,203,574,158,573,66" href="" target="" />
    ...
</map>

您可以尝试使用SVG矢量图像来选择特定的不规则形状

CSS看起来像：

.shape:hover {
    fill: green;
}

和html SVG：

<svg version="1.0" width="291.000000pt" height="300.000000pt">

<g class="rabbit"fill="#000000" stroke="none"  transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)">

<path .../>





示例：
您的意思是要突出显示此形状吗？或者只需将鼠标移到该形状上？这可能有用：@MoshFeu是的，我希望突出不规则形状的轮廓@phelpsiv回答您的问题？+1表示SVG。Adobe Illustrator非常适合自动创建SVG。如果您使用的是特定的图像贴图，可以在Illustrator中对其进行跟踪，导出SVG，然后使用此方法将任何给定的形状设置为悬停状态。（您也可以使标准状态透明）这是一个好主意，但是图像地图上的
呢
？我能找到的最好答案是Harshad Hirapara，就我所知，下面的答案尽可能接近。