map - CSS 和 HTML 中的精确 SVG 鼠标悬停

Question

我有一个想要填充的几何形状，如图

当鼠标悬停在每个区域上时，我希望它能够填充，如图所示。

不幸的是，当我添加其余形状时，我的代码不起作用，因为我的浏览器为每个形状提供了一个覆盖其余形状的边界框。如何使我的 svg 的鼠标悬停形状精确而不是框？

这是我的HTML代码：

<object data="images/logo/middle.svg" 
type="image/svg+xml" class="middlesvg hoversvg" > <!-- only the middle is shown for brevity -->
</object>

CSS

.hoversvg
{
    opacity: 0;
}

.hoversvg:hover{
    opacity: 1;
}

Answer 1

你可以直接在 SVG 中完成，不需要 CSS。

将每个段绘制为其自己的多边形或路径，并在其中添加一个 set attributeName 标记：

<path … id="path1"><set attributeName="opacity" from="0" to="1.0" begin="path1.mouseover" end="path1.mouseout"/></path>
<path … id="path1"><set attributeName="opacity" from="0" to="1.0" begin="path2.mouseover" end="path2.mouseout"/></path>

等等

此页面有更多详细信息http://www.ibm.com/developerworks/library/x-svgint/（向下滚动到事件）

Answer 2

您需要在 middle.svg 文件中实现悬停。这样，您就可以针对要在悬停时更改的特定形状。