我有以下要求：
一张大图包含多个需要链接到其他页面的“热点”。听起来很简单。我创建了一个简单的 html 页面、一个带有背景图像的 div 和使用 CSS 与图像精灵翻转的绝对定位链接。
但是，我现在看到了另一张图片，热点不是正方形，而是不规则的形状。在一个示例中，它们类似于冲浪板。任何想法如何让链接仅响应图像的实际边界框。在某些情况下，“热点”呈平行四边形并彼此相邻。
在这种情况下创建矩形图像并不能达到所需的结果。
我认为图像地图可能是一种解决方案，但我想先探索所有替代方案。
希望这是有道理的。
【问题讨论】：
HTML image maps 是要走的路——它们支持任意多边形，并且被屏幕阅读器等很好理解。
您也许可以在现代浏览器中使用 SVG 做一些聪明的事情，但它不适用于 IE6 人群。
【讨论】：
HTML 图像映射的替代方案是 Css sprite，如 a list apart article 中所述。阅读“不规则形状”下的部分。
这需要一些工作，但最终的 HTML 在语义上将比标准图像映射更具吸引力（即对搜索引擎而言）。
【讨论】：
正如 Richie 的回答所建议的，您也可以在 SVG 中使用链接。诀窍是将 SVG 与 xlink 正确混合。一个快速的解决方案如下所示：
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<a xlink:href="https://stackoverflow.com/">
<polygon points="200,10 250,190 160,210" style="fill:blue;stroke:black;stroke-width:2" />
</a>
</svg>如果您单击多边形上的任意位置，您将被定向到 stackoverflow 主页。点击其他任何地方都不会执行任何操作。
【讨论】：