我想达到 此页面使用 SVG。正如您所看到的，当用户将鼠标悬停在产品上绘制的多边形热点上时，它会使用一系列 PNG 透明叠加层。
我想要实现的目标与 SVG 相同，但不会创建大量 PNG，这样当用户将鼠标悬停在某个区域上时，透明形状（带有链接）就会出现在顶部。 SVG 形状将根据一组坐标构建，就像图像地图上的多边形热点一样。
所以我想我的第一个问题是，这可以用普通的旧 SVG 来完成还是我需要使用像 Raphael 这样的东西来实现这一点？以前从未在 SVG 中见过这种效果，所以如果有人有这样的例子将会非常有用。
提前致谢。
i want to acheive the effect on this page using SVG. As you can see it uses a series of PNG transparent overlays when the user mouses over a polygonal hotspot drawn on a product.
What i want to achieve is the same thing with SVG, but without messing about with creating a load of PNGs, so that when the user mouses over an area the transparent shape (with link on it) appears over the top. The SVG shape would be built from a set of coordinates exactly as a polygonal hotspot would on an image map.
So i guess my first question is, can this be done with plain old SVG or do i need to use something like Raphael to achieve this? Never seen this effect before with SVG so if anyone has an example like that would be very useful.
Thanks in advance.
发布评论
评论（2）
有多种方法可以使用普通的旧式 SVG 获得这种效果。最简单的可能是在 SVG 中使用 CSS。例如：
我在以下位置写了有关各种其他方法的文章：
http://www.petercollingridge.co.uk/data-visization/mouseover -效果-svgs
There are several ways to get this effect with plain old SVG. Probably the simplest is to use CSS within the SVG. For example:
I've written about various other methods at:
http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
是的，它可以仅使用 SVG 来完成，无论是否使用 javascript。
获得效果的一种方法是在要美白的图像顶部覆盖白色半透明路径。另一种方法是使用 SVG 过滤器直接处理图像，类似于我所做的 此处 或此处< /a> 对 PNG 重新着色（查看页面源代码并随意以任何您喜欢的方式重用它）。
您需要使用 'pointer-events' 属性最有可能的。这是一个示例 展示如何检测 svg 形状的填充和/或描边上的鼠标事件，即使该形状不可见。
Yes it can be done with SVG only, with or without javascript.
One way to get the effect would be to overlay a white semi-transparent path on top of the image that you want to whiten. Another way would be to use an SVG filter to process the image directly, similar to what I've done here or here to recolor a PNG (view page source and feel free to reuse that in any way you like).
You'll want to make use of the 'pointer-events' property most likely. Here's an example showing how to detect mouse-events on the fill and/or stroke of an svg shape, even if the shape is invisible.