使用SVG进行翻转覆盖

Question

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

我想要实现的是与SVG相同的东西,但是没有搞乱创建大量的PNG,因此当用户鼠标悬停在一个区域上时,透明形状(带有链接)出现在顶部.SVG形状将从一组坐标构建,就像图像映射上的多边形热点一样.

所以我想我的第一个问题是,这可以用普通的旧SVG完成,还是我需要使用拉斐尔之类的东西来实现这一目标？在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