Javascript CSS中不规则多边形的悬停效果

我想知道如何为类似于的地图标记和编码悬停效果

当鼠标滑过/触摸/单击每个区域（或分区）时，我需要在不影响任何其他分区的情况下更改其颜色。每个部分上的边界必须代表图像，不应为正方形。这个解决方案不能使用canvas，因为我正在使用的站点必须在旧的浏览器中可用（我个人很讨厌）

理想情况下，我希望在不使用太多JavaScript或图像负载的情况下使用CSS实现这一点。以前有人这样做过吗

编辑：我知道有人建议你可以使用HTML

标签来另一个自我回答

几个月前，我遇到了一个名为Raphael JS-的图书馆。对于那些不熟悉它的人来说，它首先是一个SVG DOM库。如果您对SVG有一两点了解，您就会知道IE不支持SVG，但它确实支持VML。拉斐尔也迎合了这一点。太棒了，对吧

总之，我最终将地图的AI文件保存为SVG文件，并将路径导入到JSON块中，基本上执行与以下代码相同的操作：

我遇到的唯一问题是：

• 我希望地图背景是透明的。将fill设置为transparent，同时允许分区接受鼠标覆盖在Firefox中工作，但在IE中失败。我选择用白色填充路径，然后将不透明度设置为0.01。之后，我复制了路径，并没有填充它来创建边界

---

如果使用jQuery，则可以使用maphilight插件。在github上有文档记录并可从github获得，网址为

，我知道这里的问题是什么：让我们说一个世界地图成为一种常见的方式是相当大的负担。如果我没弄错的话，你想要的是有一张领土地图图像，并放置悬停效果，使悬停区域与国家边界完全匹配。SVG可以用于地图（绘图部分已经完成），但问题是如何使用SVG地图坐标生成HTML区域地图。有一个解决方案（我已经尝试过了，至少在提供的演示中看起来不错），它使用PHP将SVG转换为Raphael（生成坐标）。但是你还是需要raphael.js来做这件事。。。好吧，如果你改变主意：。如果你不熟悉拉斐尔，需要一段时间来适应它，文档对我来说不是很好

编辑：我可以确认SVG->rapahel.js的翻译是有效的，但是SVG文件需要一些调整。我在svg2raphael中提供的SVG示例中看到，这些文件是用Adobe Illustrator制作的。我曾尝试使用Inkscape中的SVG（普通），但效果并不理想，但我可以设法解决这些问题，例如：

svg2raphael不会翻译Inkscape生成的

（将设置fill=“none”！！！因此结果是不可见的，但会正确翻译

，似乎它会忽略style=”“中的所有内容

svg2raphael从Inkscape SVG误读对齐，因此您需要将插图移动到Inkscape内部，或者使用文本编辑器编辑SVG文件，并将M值更改为M0,0

svg2raphael可以翻译多个svg元素，但查看Inkscape生成的主标记以对齐插图组，有时整个插图会从渲染区域移开，而您什么也看不到。希望这有帮助

---

编辑2:您可以使用Inkscape的style=“”对于创建应用于SVG的CSS规则来说，这非常有效，并且保持了SVG/Raphael之外的风格！

你说得对。不幸的是，我认为如果不使用javascript，就无法使用纯CSS+HTML实现跨浏览器解决方案。：hover pseudoclass将仅适用于现代浏览器，但不适用于IE<9。旧文章，但你可能想看看这个：嘿@WillMorgan这看起来很酷，但我没有看到您在哪里将SVG转换为JSON块供raphael使用。我看到您在FMAC.js中声明了var mapPaths=，但您是如何得到的？您只是将xml SVG数据直接转换为JSON吗？（我显然在显示我的SVG noobness，但我认为其他人也会有相同的问题）。其他人也会有同样的*问题。愚蠢的是无法编辑评论。看起来有一种PHP技术正在流行，我应该能够使用它：我知道你现在做了什么，使用jQuery获取svg并将其作为xml文档循环。对于其他人来说，这在下面的简化代码中。我正在开发一个e例如，现在，我希望能在某个时候把它作为一个JSFIDLE。好吧，我想在某种程度上，这只适用于数据只是一个SVG映射路径的情况，但这是我能看到你用SVG绘制一个不规则多边形的唯一方法…我理解，所以你可能需要的是得到你需要的映射的SVG，并使用一个工具来转换SVG路径坐标o HTML区域映射坐标，然后将该HTML代码用于先前SVG的PNG版本。