svg - 使用 SVG 进行翻转叠加

Question

我想在 this page 上实现效果使用 SVG。正如您所看到的，当用户将鼠标悬停在产品上绘制的多边形热点上时，它会使用一系列 PNG 透明叠加层。

我想要实现的目标与 SVG 相同，但不会创建大量 PNG，这样当用户将鼠标悬停在某个区域上时，透明形状(带有链接)就会出现在顶部。 SVG 形状将根据一组坐标构建，就像图像 map 上的多边形热点一样。

所以我想我的第一个问题是，这可以用普通的旧 SVG 来完成还是我需要使用像 Raphael 这样的东西来实现这一点？以前从未在 SVG 中见过这种效果，所以如果有人有这样的例子将会非常有用。

提前致谢。

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