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

Question

我想知道如何对类似这张图片的地图进行标记和编码悬停效果。

当鼠标悬停/触摸/点击每个区域时，我需要更改其颜色，而不影响任何其他区域。每个区域的边界必须代表该图像，不能是正方形。解决方案不能使用画布，因为我正在处理的网站必须在旧版浏览器中可用（个人感到很失望）。

理想情况下，我希望使用CSS来完成此操作，而不使用太多JavaScript或大量图像。有人之前做过吗？

编辑：我知道有人建议使用<area>标签，但据我所知，它不接受:hover伪类。

编辑2：我可能会使用这个：http://www.netzgesta.de/mapper/

- Will Morgan

---

这是一篇旧帖子，但你可能想看看这个链接：http://www.alistapart.com/d/sprites/ala-blobs2.html - Benjol

Answer 1

另一个自我回答...

几个月前，我发现了一个名为Raphael JS的库 - http://raphaeljs.com/。对于那些不熟悉它的人来说，它首先是一个SVG DOM库。如果您对SVG有一些了解，您会知道IE不支持它，但它支持VML。Raphael也提供了这个功能。很棒，对吧？

无论如何，我最终将地图的AI文件保存为SVG文件，并将路径导入JSON块，基本上做了与此代码相同的事情：http://raphaeljs.com/australia.html

我遇到的唯一问题：

• 我希望地图背景是透明的。在Firefox中设置填充为透明，同时允许该部分接受mouseover可以正常工作，但在IE中失败了。我选择用白色填充路径，然后将不透明度设置为0.01。之后，我复制了路径并没有填充它，以创建边框。

- Will Morgan

---

嘿@WillMorgan，这看起来很酷，但我没有看到你在哪里将SVG转换为JSON块以供raphael使用。我看到你在FMAC.js中声明了var mapPaths =，但你是怎么得到它的？你只是直接将xml SVG数据转换为JSON吗？（显然我展示了我的SVG新手，但我认为其他人也会有同样的问题）。 - NateDSaint

其他人可能会有同样的问题。无法编辑评论真是太蠢了。 - NateDSaint

看起来有一种 PHP 技术正在流传，我应该能够使用它：http://bkp.ee/atirip/convert-svg-into-raphael - NateDSaint

我现在明白你的做法了，使用jQuery获取svg并将其作为xml文档循环遍历。对于其他人来说，在那里下面的压缩代码中可以找到这个方法。我正在制作一个示例，希望能够在某个时候将其放在jsfiddle上。 - NateDSaint

好吧，我猜这只适用于数据只是SVG地图路径的程度，但这是我能看到你在SVG中绘制不规则多边形的唯一方法... - Will Morgan

Answer 2

您可以使用HTML的<area>标签

- antyrat

---

你是对的。不幸的是，我认为如果不使用JavaScript，纯CSS+HTML无法实现跨浏览器解决方案。:hover伪类仅适用于现代浏览器，而不适用于IE < 9。 - antyrat

Answer 3

如果您使用jQuery，可以使用maphilight插件。该插件在http://davidlynch.org/projects/maphilight/docs/有文档记录，并且可以从github https://github.com/kemayo/maphilight获取。

- isapir

Answer 4

我看到这里的问题是：以通常的方式制作一张世界地图是相当费劲的。如果我理解正确，您想要的是有一个 领土地图 图像，并使用悬停效果使悬停区域与国家边界完全匹配。SVG 可用于地图（绘图部分已经完成），但问题是如何使用 SVG 地图坐标生成 HTML 区域地图。有一个解决方案（我已经尝试过了，至少在提供的演示中看起来不错），它使用 PHP 将 SVG 转换为 Raphael（生成坐标）。但是，您需要 raphael.js 才能实现...好吧，如果您改变主意：https://github.com/atirip/svg2raphael。如果您不熟悉 Raphael，则需要花费一些时间才能适应它，文档对我来说不是很好。

编辑：我可以证实从 SVG-> rapahel.js 的转换确实有效，但 SVG 文件需要进行一些调整。根据我在 svg2raphael 提供的示例 SVG 中所看到的，这些文件是使用 Adobe Illustrator 制作的。我尝试使用来自 Inkscape 的 SVG（纯）文件，但它没有正常工作，但我可以解决问题，例如：

1. svg2raphael无法翻译Inkscape生成的<path style="fill:#ff0000" ...></path>（会将fill设置为“none”!!!因此结果是不可见的，但可以正确翻译<path fill="#ff0000" ...></path>）。似乎它会忽略style=""内的所有内容。
2. svg2raphael从Inkscape SVG中错误读取对齐方式，因此您需要将插图移动到Inkscape中或使用文本编辑器编辑SVG文件并将M值更改为M0,0。
3. svg2raphael可以翻译多个svg元素，但会查看Inkscape生成的主要标签以对齐插图组，有时整个插图会移出渲染区域，您将看不到任何内容。希望这可以帮助您！

编辑2：您可以使用Inkscape的style=""创建CSS规则并应用于SVG，这非常好，并且将样式保持在SVG/Raphael之外！

- aesede

---

我了解，你可能需要获得所需地图的SVG，并使用将SVG路径坐标转换为HTML area map坐标的工具，然后将该HTML代码用于以前SVG的PNG版本。 - aesede