Question

大家下午好，

我在我的页面上使用以下defs定义了一个SVG。

<svg width="0" height="0">
    <defs>
        <g id="stroke-hexagon">
            <polygon fill="#002663" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="12" points="57.8,185 5.8,95 57.8,5 161.8,5 213.8,95 161.8,185 "/>

        </g>

        <g id="hexagon">
            <polygon fill="#006890" points="52,180 0,90 52,0 156,0 208,90 156,180 "/>
        </g>
    </defs>
</svg>

...稍后在HTML中使用以下方法实现它：

<svg width="208px" height="180px" viewBox="0 0 208 180" >
    <use xlink:href="#hexagon"></use>
    <text class="faicon" x="50%" y="70px" fill="white" font-size="80px" text-anchor="middle">&#xf040</text>
    <text text-anchor="middle" x="50%" y="70%" fill="white">Logo Here</text>
</svg>

完全正常。我也可以使用简单的CSS设置polygon的填充样式。看起来像这样：

#hexagon:hover polygon {
    fill:#990000;
}

然而，只要鼠标离开polygon并悬停在svg内的任何一个“文本”元素上，悬停效果就会失败。有没有办法定义阻止此行为的CSS规则。或者，使用JS / jQuery改变属性会更好（更容易）吗？

谢谢！

Answer 1

您的文本将呈现在多边形的顶部，因此会拦截鼠标事件。您应该设置一个像

这样的CSS规则

text {
    pointer-events: none;
}

这将阻止文本成为鼠标事件的目标，这些事件应该为多边形提供所需的悬停效果。

具有多个元素的SVG悬停状态

1 个答案: