SVG实现的鼠标悬停覆盖效果

Question

我希望使用SVG实现此页面中的效果。如您所见，当用户在产品上绘制的多边形热点上移动鼠标时，它使用一系列PNG透明叠加层。

我想要实现的是相同的效果，但是不需要创建大量PNG文件，因此当用户在区域上移动鼠标时，透明形状（带有链接）将出现在顶部。 SVG形状将从一组坐标构建，就像图像映射上的多边形热点一样。

所以，我的第一个问题是，这可以用普通的SVG完成，还是需要使用Raphael之类的工具来实现？从未在SVG中看到过这种效果，如果有人有类似的示例，那将非常有用。

提前感谢。

- El Guapo

---

就我个人而言，我认为从可用性的角度来看，这种效果与您期望的相反。将鼠标悬停在一个项目上会使其变灰、无效和禁用？相反，我会让所有项目一开始就呈现淡化和/或较低的透明度，当鼠标悬停在它们上面时，它们会以更强烈、更鲜艳的颜色“突出”。 - Phrogz

Answer 1

有几种方法可以使用普通的SVG获得此效果。可能最简单的方法是在SVG内部使用CSS。例如：

<style>
  .overlay:hover
  {
    opacity: 0.5;
  }
</style>

<svg>
  <a xlink:href="http://www.wherever/you/want/to/link/to.com">
    <path class="overlay" d="Coordinates of your shape..." />
  </a>
</svg>

我在以下网址中写了关于其他方法的内容： http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

该网址介绍了各种与鼠标悬停效果有关的SVG技术。

- Peter Collingridge

---

请注意，仅使用不透明度并不能完全模仿简单未裁剪图像的参考效果。例如，太阳镜重叠在裤子上，但是将鼠标悬停在太阳镜上并不会导致裤子通过太阳镜可见。 - Phrogz

如果需要这种效果，那么您可以在原始图像上方放置第二个较轻的图像，并将其可见性设置为“hidden”，并使用可见性=“visible”的悬停效果。 - Peter Collingridge

谢谢你们的帮助，非常感激。虽然最终我认为我将不得不使用Raphael解决方案，因为我需要它能够跨浏览器兼容至少IE7。 - El Guapo

Answer 2

是的，可以只使用SVG进行操作，无论是否使用JavaScript。

一种实现效果的方法是在要变白的图像上覆盖一个白色半透明路径。另一种方法是直接使用SVG滤镜处理图像，类似于我在这里或这里所做的重新着色PNG（查看页面源代码并随意重用）。

您可能需要使用'pointer-events'属性。这里有一个示例，展示了如何检测svg形状的填充和/或描边上的鼠标事件，即使该形状是不可见的。

- Erik Dahlström