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

Posted 2023-03-06

【中文标题】CSS中不规则多边形的悬停效果

【英文标题】：Hover effects on irregular polygons in CSS

【发布时间】：2011-04-16 04:08:19

【问题描述】：

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

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

理想情况下，我希望在不使用过多 javascript 或大量图像的情况下使用 CSS 来实现这一点。以前有人做过吗？

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

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

【问题讨论】：

旧帖，但你可能想看看这个：alistapart.com/d/sprites/ala-blobs2.html

【参考方案1】：

另一个自我回答...

几个月前，我遇到了一个名为 Raphael JS 的库 - http://raphaeljs.com/。对于那些不熟悉它的人，它首先是一个 SVG DOM 库。如果您对 SVG 有所了解，您就会知道 IE 不支持它，但它支持 VML。拉斐尔也迎合了这一点。太棒了，对吧？

无论如何，我最终将地图的 AI 文件保存为 SVG 文件并将路径导入 JSON 块，基本上与以下代码执行相同的操作：http://raphaeljs.com/australia.html

我遇到的唯一问题：

我希望地图背景是透明的。将填充设置为透明，同时允许该部分接受鼠标悬停在 Firefox 中有效，但在 IE 中，它失败了。相反，我选择用白色填充路径，然后将不透明度设置为 0.01。之后我复制了路径并且没有填充它来创建边框。

【讨论】：

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

其他人也会有同样的*问题。愚蠢的无法编辑 cmets。

看起来有一种 php 技术漂浮在那里，我应该可以使用它：bkp.ee/atirip/convert-svg-into-raphael

我看到你现在做了什么，使用 jQuery 获取 svg 并将其作为 xml 文档循环。对于其他来这里的人，那是在下面的缩小代码中。我现在正在研究一个例子，我希望能够在某个时候将它作为一个 jsfiddle 提出来。

好吧，我想在某种程度上这只有在数据只是 SVG 地图路径时才有效，但这是我看到你在 SVG 中绘制不规则多边形的唯一方法......跨度>

【参考方案2】：

你可以使用HTML <area>标签

【讨论】：

你是对的。不幸的是，我认为你不能在不使用 javascript 的情况下使用纯 CSS+HTML 进行跨浏览器解决方案。 :hover 伪类仅适用于现代浏览器，但不适用于 IE

【参考方案3】：

如果你使用 jQuery，你可以使用 maphilight 插件。记录在http://davidlynch.org/projects/maphilight/docs/，可从githubhttps://github.com/kemayo/maphilight获得

【参考方案4】：

我明白这里的问题是什么：让我们说世界地图以通常的方式制作是相当大的负担。如果我没看错的话，您想要的是有一个 领土地图 图像并放置悬停效果，使悬停区域与国家边界完全匹配。 SVG 可以用于地图（绘图部分已经完成），但问题是如何使用 SVG 地图坐标生成 HTML 区域地图。有一个解决方案（我已经尝试过了，至少在提供的演示中看起来不错），它使用 PHP 将 SVG 转换为 Raphael（生成坐标）。但同样，你需要 raphael.js ......好吧，如果你改变主意：https://github.com/atirip/svg2raphael。如果您不熟悉 Raphael，则需要一段时间来适应它，文档并不是那么好 - 对我来说 -。

编辑：我可以确认从 SVG->rapahel.js 的翻译可以工作，但 SVG 文件需要一些调整。对于我在 svg2raphael 中提供的示例 SVG 中看到的，这些文件是使用 Adob​​e Illustrator 制作的。我已经尝试过使用 Inkscape 的 SVG（普通），但它不能正常工作，但我可以设法解决这些问题，例如：

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

编辑 2：您可以使用 Inkscape 的 style="" 创建适用于 SVG 的 CSS 规则，这样可以很好地保持 SVG/Raphael 之外的样式！

【讨论】：

我明白了，所以您可能需要获取所需地图的 SVG 并使用将 SVG 路径坐标转换为 HTML 区域地图坐标的工具，然后将该 HTML 代码用于 PNG 版本上一个 SVG。